게시글에 생략부호를 만들고 싶을 때

게시글에 생략부호를 만들고 싶을 때 

 

 

display: inline-block;       span에 가로길이(width)를 주기위해 inline-block 속성을 부여한다. 
width: 80%;                          가로길이를 정한다. 
white-space: nowrap;      줄바꿈을 하지 않는다.  
overflow: hidden;              넘치는 글자는 보이지 않도록 한다. 
text-overflow: ellipsis;     생략기호를 만들어준다. 

 

 

 

 

html 부분

 

<section>
<h2>공지사항</h2>
<ul>

<li><a href="#"><span class="ellip">text-overflow: ellipsis; 생략기호를 사용하여 게시글의 끝을 처리하였다. </span><span class="day">2022.03.14</span></a></li>

<li><a href="#"><span class="ellip">반품/환불 규정에 대해 알려드립니다.</span> <span class="day">2022.03.14</span></a></li>

<li><a href="#"><span class="ellip">S/S 시즌 신규 의류 신상품 안내</span> <span class="day"> 2022.03.14</span></a></li>

<li><a href="#"><span class="ellip">신규회원 대상 할인 이벤트 안내</span> <span class="day">2022.03.14</a></li>

</ul>
</section>

 

 

 

css 부분

 

    ul li span.ellip {
      display: inline-block;
      width: 80%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

 

 

 

 

[ 참고 ] 

★ word-wrap: break-word;  
긴 단어를 끊고 다음 줄로 줄 바꿈할 수 있다 (강제개행)