Notice
Recent Posts
Recent Comments
«   2025/07   »
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
Today
Total
관리 메뉴

IT CUBE

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

Front-End

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

CUBE 2021. 9. 30. 22:28

 

 

-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으로 설정해야 합니다.