CSS로 텍스트 생략(...)하기 - 이상원 기술 블로그

css를 사용해서 말 줄임 처리를 하기 위해서는 display 속성 값에 따라 약간의 코드가 추가됩니다.
(js를 사용하지 않고 css로 문제를 해결할 수 있다면 성능 측면에서 이점을 가져갈 수 있습니다)
block 요소는 기본적으로 부모의 너비를 상속받기 때문에 추가 속성이 필요 없습니다. 하지만 inline 요소는 width 값을 변경할 수 없고, 콘텐츠의 크기만큼 값을 가지므로 inline-block으로 변경 후 width:100%를 통해 부모 너비를 상속받아야 합니다.

아래 예제는 <div>태그 안에 <h2>와 <span>태그가 존재합니다.

<div className="content">
  <h2>qui est esse</h2>
  <span>
    vest rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea
    dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut
    reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla
  </span>
</div>

<span> 태그의 텍스트를 한 줄로 변경하려면 css 속성은 아래와 같습니다.

span {
  display: inline-block; /* inline 요소이기 때문에 width 상속을 위해 inline-block으로 변경 */
  width: 100%; /* 부모 너비 상속 */
  white-space: nowrap; /* 자동 줄바꿈 해제 */
  overflow: hidden; /* 영역 밖 콘텐츠 숨김 */
  text-overflow: ellipsis; /* 숨겨진 콘텐츠 생략(...) 표기 */
}

위 속성들을 정리하면 부모의 너비를 상속받아 콘텐츠를 한 줄로 표기하고 너비를 벗어난 콘텐츠는 보이지 않게 하며 생략(...) 표기를 해라로 해석할 수 있습니다.

만약 <span> 태그가 아닌 block 요소인 <p> 태그라면 display 속성과 width 속성이 필요 없습니다.

p {
  /* display: inline-block;
  width: 100%; */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

여러 줄을 노출 시킬땐 -webkit-line-clamp 속성을 원하는 줄 수에 맞게 설정하면 됩니다.

p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}