[CSS] CSS 텍스트 줄이기 ... 표시

제목만으로 어떤 말인지 알기가 힘든데 그림으로 어떤 내용을 포스팅할지 보여드리겠습니다.

이미지 출처 : https://velog.io/@decody/Text-truncation-with-only-CSS

게시판이나 리스트의 제목을 줄이는 방법입니다.

엄청나게 긴 글을 게시판 리스트에 표시한다면 제목이 칸 밖으로 넘어가거나 줄 바꿈이 됩니다.

공간의 크기를 늘려서 보기 싫게 만드는 모습. 바꾸고 싶으실 겁니다.

 

어떻게 바꾸시겠습니까?

자바스크립트로 for문으로 DOM탐색해서 제목 요소를 하나하나 선택하고 특정 글자 수까지 표현하실 건가요?

CSS를 이용해서 클래스 하나만 추가하면 일괄적으로 쉽게 변경할 수 있습니다.

 

 

방법

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

CSS의 class에 위의 코드를 입력하는 것이 키워드입니다.

위의 코드가 모두 있어야 됩니다.

 

 

코드

See the Pen by wooncloud (@wooncloud) on CodePen.

상위 요소의 width보다 더 커지면 ... 표시를 할 수 있게 하는 코드입니다.

그래서 width:100%를 입력했습니다.

 

 

어때요 참 쉽죠?

별것 아닌 정보지만, 은근히 모르는 분들이 많아서 자바스크립트로 고생하는 모습을 본 적이 있답니다.

이 글을 보신 여러분들은 이런 사소한 부분 때문에 고생하지 말고 쉽게 해결하세요!

화이팅!