text-overflow ellipsis

text-overflow : ellipsis란?

지정영역을 넘게되는 텍스트를 ... 말줄임표로 처리 해주는 스타일이다.

ellipsis를 적용하기 위해서는 아래 조건이 충족되야 한다.

• width값이 지정 되어 있을것.
  (inline tag는 width값이 적용되지 않기 때문에 block요소로 tag속성을 변경해야 함.)

• 텍스트가 줄바꿈이 되지 아니하고 텍스트가 박스영역을 넘지 않을것.

CODE

.line1-ellipsis {
display: block;/* 블록태그로 만들어준다 */
text-overflow: ellipsis;/* 말줄임 css */
white-space: nowrap;/*글자를 한줄로 모아준다*/
overflow: hidden;
}


//-------------------------------

몇번째 줄마다 말줄임표 처리할때 
span {
  overflow: hidden; 
  max-width: 267px; 
  display: -webkit-box; 
  -webkit-line-clamp: 4; 
  -webkit-box-orient: vertical; 
  text-overflow: ellipsis;
}