영역이 넘는 html 텍스트 css로 간단히 말줄임표로 줄이기 [출처] 영역이 넘는 html 텍스트 css로 간단히 말줄임표로 줄이기|작성자 Smile

영역이 넘는 html 텍스트 css로 간단히 말줄임표로 줄이기!!

 

예를 들어

 

<div>

   <ul>

       <li class="ellipsis">영역이 넘는 html 텍스트 css로 간단히 말줄임표로 줄이기!!</li>

   </ul>

</div>

 

저렇게 코딩을 하고 말줄임까지 나오고 나머지는 ...으로 나오게 하기 위해서는 html 마크업을 마친 후 css로 넘어와서

 

.ellipsis {

width:250px;       // 이 부분은 디자인된 길이에 따라서 변경이 가능합니다.

display:inline-block;

text-overflow:ellipsis;  //잘라지는 부분에 자동으로 ...을 넣어주는 속성입니다.

overflow:hidden;

white-space:nowrap;

}

 

이렇게 지정을 해주시면 간단하게 해결하실 수 있습니다.

[출처] 영역이 넘는 html 텍스트 css로 간단히 말줄임표로 줄이기|작성자 Smile