로고

텍스트 말줄임 표시 초급부터 고급까지 - CSS

CSS
Tailwind CSS
텍스트 말줄임 처리를 CSS로 처음 배우고 겪는 문제들을 하나씩 해결하면서 고급 활용으로 나아가는 과정을 알아보도록 하자.

기본 활용

.textbox {
  text-overflow: ellipsis;
  overflow: hidden;
  width: 150px;
}
위와 같이 지정해주면 말줄임 처리를 할 수 있다. 그러나 width를 고정값으로 사용하고 있기 때문에 flex, grid와 같이 창 크기에 따라 박스 너비가 유동적으로 변하는 박스에는 적용할 수 없다. 너비가 유동적인 박스에도 처리해주기 위해서는 한 줄만 바꿔주면 된다.
.textbox {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap; /* 텍스트가 길어도 줄바꿈을 무시하고 한 줄로 유지 */
  width: 150px;
}
이제 너비가 유동적으로 변하더라도 한 줄이 꽉 차면 말줄임 처리가 깔끔하게 되는 것을 확인할 수 있다. 그러나 위와 같은 방법은 한 줄짜리 텍스트를 말줄임할 때만 활용할 수 있다는 한계가 있다.

여러 줄 텍스트 말줄임

처음에는 아래와 같이 자바스크립트를 이용하여 지정한 글자 수를 초과하면 말줄임 처리를 해주었다.
export default function Textbox() {
  const text = "동해물과 백두산이 마르고 닳도록";
  // 10글자가 넘어가면 '...' 표기를 해줘
  return <div>{text.length > 10 ? text.slice(0, 10) + "..." : text}</div>;
}
그러나 위 방법은 flex, grid를 적용한 유동적인 박스에서는 무용지물이었다. 이때, 말줄임 처리의 끝판왕 -webkit-line-clamp가 등장하게 된다.
.textbox {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 말줄임 줄 수 지정 */
}
위 방법을 알고 있으면 어떤 텍스트 박스를 만나든 자유자재로 말줄임 처리를 할 수 있다. 만약 Tailwind CSS를 사용한다면 아래와 같이 간단하게 적용할 수 있다.
export default function Textbox() {
  const text = "동해물과 백두산이 마르고 닳도록";
  return <div className="line-clamp-3">{text}</div>;
}

참고