[CSS] 글자수가 넘어갈 때 생략하고 ...으로 표시하기

사진 : Unsplash 의 Pankaj Patel

 

저번 포스팅에서는 줄바뀜 시 단어가 잘리지 않고 통째로 넘어가는 방법에 대해 다뤄봤습니다.

 

https://jaeheepapa.tistory.com/entry/CSS-티스토리에서-줄바뀜-시-단어가-잘리지-않게-하기

[CSS] 티스토리에서 줄바뀜 시 단어가 잘리지 않게 하기

 

그런데 또 사용하다보니 아무래도 오른쪽 공백이 신경쓰이더군요.

단어 통째로 넘어가면서 빈 공간이 많아졌습니다.

 

그래서 이번에는 제목을 한줄로 표시하고 넘치는 부분을 생략 표시(...)로 표현되게 바꿔보겠습니다.

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

제목 클래스에 위 속성을 부여하면 끝입니다.

 

white-space: nowrap;

자동 줄바꿈을 없애주는 속성입니다. 제목이 길어지면 밑으로 내려가는 것이 아니라 영역을 넘어 한줄로 길게 들어가는 것이지요.

 

overflow: hidden;

영역을 넘어가는 부분을 가려주는 속성입니다. 

 

text-overflow: ellipsis;

마지막으로 넘쳐서 가려지는 부분을 말줄임표(...)를 표시해주는 속성입니다.

 

이렇게 적용을 해봤는데 변하지가 않는다면?

제 스킨의 경우 제목 태그가 <h2>로 되어있는데 display 속성 때문입니다. 

display: inline-block;

이렇게 속성을 inline-block 으로 바꿔주면 잘 적용되는 것을 볼 수 있습니다. 

 

말줄임표가 반영된 메인화면

최종 반영된 h2 스타일