[CSS] 특정 줄 수 넘어갈 때 말줄임(...) 표시하기, Webkit

클래식 공연 정보 제공 사이트를 개발하던 중, 공연 제목이 너무 길어 다른 요소들과 정렬이 어긋나는 문제가 있었다.

이는 -webkit-line-clamp 속성으로 줄 수를 제한하여 해결할 수 있다.

-webkit-, Webkit?

속성 앞에 접두사처럼 붙는 -webkit-은, Chrome, Safari 등 WebKit 기반 브라우저에서
특정 CSS 속성이나 기능을 사용할 때 붙이는 브라우저 전용 접두사이다. 여기서 Webkit은 브라우저를 위한 HTML/CSS 렌더링 엔진의 하나라고 보면 된다.

그렇다면 다른 속성들과 달리 왜 -webkit-라는 접두사를 붙이는 것일까?

CSS의 실험적이거나 비표준적인 기능은 브라우저마다 다르게 동작할 수 있다.
따라서 브라우저 제조사들이 자사 엔진 전용으로 만든 기능을 접두사와 함께 제공하는 것이다.

적용 속성들

.content { 
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;  
  -webkit-line-clamp: 2;
  
  /* 브라우저 호환성을 높이기 위해 사용 */
  line-clamp: 2;
  
  /* 말줄임표 (...) 표시하고 싶은 경우 사용 */
  text-overflow: ellipsis;
}