[CSS] -webkit-line-clamp 속성 사용하기

 

 

-webkit-line-clamp 속성이란?

블록 컨테이너의 콘텐츠를 지정한 줄 수만큼 제한할 수 있게 하는 속성입니다.

한마디로, 여러 줄로 이루어진 문단을 일정 줄 수 만큼만 보이게 할 수 있습니다!

 

code

.titleButton .clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

 

여기서

display는 -webkit-box 또는 -webkit-inline-box,

-webkit-box-orient는 vertical로 설정한 경우에만 동작합니다.

 

-webkit-line-clamp만 사용하는 경우, 말줄임표는 노출되지만 넘친 컨텐츠가 숨겨지지 않기 때문에

overflow 속성 또한 hidden으로 설정해야 합니다.