text-overflow: ellipsis 속성 활용하기

좌 - 수정 전 / 우 - 수정 후

오랜만에 개츠비 블로그를 보수하던 중, 제목이 너무 길면 모바일에서 못나게 보이던 문제가 있었습니다.

text-overflow 속성을 활용하면 저렇게 삐져나오는(overflow) 텍스트를 쉽게 처리할 수 있습니다.

🔨 text-overflow

text-overflow는 먼저 단독으로 사용될 수 없습니다.

 

text-overflow는 overflow: hidden을 대체하는 것이 아니라 레이아웃을 삐져나오는 순간 해당 텍스트를 특정 문자열로 교체하는데요, 따라서 항상 삐져나온 텍스트를 숨겨주는 overflow: hidden 과 여러 줄의 텍스트를 한 라인으로 만들어주는 white-space: nowrap 속성이 항상 세트로 필요합니다. (+ 적용할 문자는 항상 display: block 속성이어야 합니다!)

{
  display: block; /* 또는 inline-block */
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}