IT CUBE
[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으로 설정해야 합니다.
'Front-End' 카테고리의 다른 글
프론트엔드가 포트폴리오 만들 때 유용한 사이트 모음 (0) | 2021.09.30 |
---|---|
프론트엔드 작업 시 유용한 사이트 모음 (0) | 2021.09.30 |
[HTML] <div>와 <span> 태그의 차이 (0) | 2021.09.30 |
[HTML] 시맨틱태그의 의미와 종류 (0) | 2021.09.29 |
VSCode 필수 extension 11가지 (0) | 2021.09.29 |