-webkit-line-clamp
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
-webkit-line-clamp
CSS 속성은 블록 컨테이너의 콘텐츠를 지정한 줄 수만큼으로 제한합니다.
display
속성을 -webkit-box
또는 -webkit-inline-box
로, 그리고 -webkit-box-orient
속성을 vertical
로 설정한 경우에만 동작합니다.
-webkit-line-clamp
만 사용하는 경우, 말줄임표는 노출되나 넘친 콘텐츠가 숨겨지지 않으므로 대개 overflow
속성 또한 hidden
으로 설정해야 합니다.
앵커 요소에 적용한 경우 텍스트의 끝이 아니라 중앙에서 잘리는 경우도 있습니다.
참고:
-webkit-line-clamp
는 원래 WebKit이 구현했었으며 몇몇 문제점을 가지고 있으나 레거시 지원을 위해 표준화를 거쳤습니다. CSS Overflow Module Level 3 명세의line-clamp
가-webkit-line-clamp
를 대체하기 위해 정의된 속성입니다.
구문
형식 정의
초기값 | none |
---|---|
적용대상 | all elements |
상속 | no |
계산 값 | as specified |
Animation type | by computed value type |
형식 구문
-webkit-line-clamp =
none |
<integer [1,∞]>
예제
문단 자르기
HTML
html
<p>
In this example the <code>-webkit-line-clamp</code> property is set to
<code>3</code>, which means the text is clamped after three lines. An ellipsis
will be shown at the point where the text is clamped.
</p>
CSS
css
p {
width: 300px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
결과
명세
Specification |
---|
CSS Overflow Module Level 4 # propdef-line-clamp |
브라우저 호환성
BCD tables only load in the browser