[CSS] 말줄임 기능, text-overflow: ellipsis

이전 처음 입사했을 때 "홈페이지에 게시물제목이 길어서 화면이 깨진다, 제목이 너무 길면 말줄임표시가 뜨도록 바꿔라"라고 하신 적이 있었다.

 

아무것도 모르던 나는 이를 스크립트로 해결했다... 

예를들어 제목 길이가 20글자 이상일 때 substring으로 잘라서 그 뒤에 "..."을 붙이는 식으로.

그런데.. CSS를 보다보니 -_-

뻘짓이었다.

 

 

말줄임표시는 CSS에서 간단하게 5줄만 써주면 구현할 수 있다.

.text-ellipsis-example { 

  width : 200px; /*원하는 길이*/

  display : block; 

  overflow : hidden; 

  text-overflow  : ellipsis; 

  white-space : nowrap; 

}

 

코드테스트

 

 

p.s. 2~3줄짜리 말줄임표시도 CSS만으로 해결이 가능한데 그건 다음 기회에...