-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를 대체하기 위해 정의된 속성입니다.

구문

css
/* 키워드 값 */
-webkit-line-clamp: none;

/* <integer> 값 */
-webkit-line-clamp: 3;
-webkit-line-clamp: 10;

/* 전역 값 */
-webkit-line-clamp: inherit;
-webkit-line-clamp: initial;
-webkit-line-clamp: unset;
none

콘텐츠를 자르지 않습니다.

<integer>

몇 줄 뒤에 콘텐츠를 자를지 지정합니다. 0보다 커야 합니다.

형식 정의

초기값none
적용대상Block containers except multi-column containers
상속no
계산 값as specified
Animation typean integer

형식 구문

line-clamp = 
none |
<integer [1,∞]> || <'block-ellipsis'>

<block-ellipsis> =
none |
auto |
<string>

예제

문단 자르기

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

브라우저 호환성

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
line-clamp
none

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

같이 보기