
알고있으면 좋은 CSS3 Tip✨
line-clamp란 무엇인가?
- 블록 컨테이너의 콘텐츠를 지정한 줄 수만큼으로 제한할 수 있는 속성이다.
(1) 사용 방법
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
- display 속성을 webkit-box 또는 webkit-inline-box로 설정한다.
- -webkit-box-orient 속성을 vertical로 설정한 경우에만 동작한다.
- 단순히 요소의 줄 수만 제한하기 때문에 overflow: hidden 속성과 함께 사용하면 요소를 넘치는 텍스트를 감출 수 있다.
'Study > CSS3' 카테고리의 다른 글
| [CSS3] 크로스브라우징(Cross Browsing) (0) | 2024.11.26 |
|---|---|
| [CSS3] not & has (0) | 2024.11.26 |
| [CSS3] 가상 클래스 & 요소 선택자 (0) | 2024.02.29 |
| [CSS3] 애니메이션(animation), 키프레임(@keyframes) (0) | 2023.10.05 |
| [CSS3] text-shadow (0) | 2023.09.05 |