CSS만으로 줄이 길어질 때 "..."로 처리하는 기법

출처 : https://sir.kr/cm_free/1473945

CSS로 처리하는 재미있는 기법 소개합니다.

 

HTML : 

<p class="truncate-text">한 줄에 보여주는 글이 길어질 때, 적당한 길이 이후 "..."로 마무리</p>

 

CSS :

.truncate-text {

   overflow: hidden;

   white-space: nowrap;

   text-overflow: ellipsis;

   width: 200px;

}

 

위 코드는 http://jsfiddle.net/에서 직접 입력 후 확인해 보세요..