-webkit-line-clamp

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

구문

/* 키워드 값 */
-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
적용대상all elements
상속no
Computed valueas specified
Animation typeby computed value type

형식 구문

none | <integer>

예제

문단 자르기

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

p {
  width: 300px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

결과

명세

Specification Status Comment
CSS Overflow Module Level 3
The definition of '-webkit-line-clamp' in that specification.
Working Draft Initial definition

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
-webkit-line-clampChrome Full support 6Edge Full support 17Firefox Full support 68IE No support NoOpera Full support 15Safari Full support 5WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 68Opera Android Full support 14Safari iOS Full support 4.2Samsung Internet Android Full support 1.0

Legend

Full support  
Full support
No support  
No support

같이 보기