-webkit-line-clamp
속성 사용법
-webkit-line-clamp
속성은
텍스트 영역의 줄바꿈하는 텍스트를 지정된 줄 수로 제한해서 제한한 줄 수 보다 텍스트가 길면 생략 부호(...
)를 표시하는 속성입니다.
이 속성은 텍스트의 여러 줄 말줄임(...
)을 CSS로 표시하는데 매우 유용합니다.
이 속성은 해당 요소의 display
속성의 값이 -webkit-box
로 설정되고 -webkit-box-orient
속성의 값이 vertical
로 설정되어 있을 경우에 작동합니다. 이때 제한한 줄 수 보다 텍스트가 길면 생략 부호(...
)를 표시합니다.
해당 요소의 overflow
속성의 값이 visible
이 아닌 값으로 설정되어 있으면 지정된 줄 수로 제한해서 텍스트가 잘리지만, 그렇지 않으면 생략 부호(...
)를 표시한 이 후에도 텍스트가 계속 표시됩니다.
데모로 이해하기
다음의 데모는 -webkit-line-clamp
속성을 활용해서 텍스트 영역의 줄바꿈을 3줄로 제한하는 예시입니다.
-webkit-line-clamp
속성의 기능을 알면 텍스트를 지정된 줄 수로 제한해서 말줄임을 표시하는(...
) 방법에 대해 쉽게 이해할 수 있습니다.
다양한 데모 보기
아래의 다양한 데모로 -webkit-line-clamp
속성을 활용하는 방법을 알아보겠습니다.
텍스트의 한 줄 말줄임(...
) 표시 설정은 text-overflow
속성이 유용합니다.
-webkit-line-clamp
속성의 형식은 다음과 같습니다.
형식 구문
값
none |
초깃값임.
지정된 줄 수로 제한하지 않고 생략 부호를 표시하지 않습니다. 이 값은 일부 브라우저에서만 지원합니다. |
---|---|
양의 정수 |
이 값은 제한할 텍스트의 줄 수를 지정합니다. 0 보다 커야 합니다. 제한할 텍스트의 줄 수 보다 텍스트가 길면 제한할 텍스트의 줄 수 끝에 생략 부호를 표시합니다. 생략 부호는 줄임표 문자(U+2026, HORIZONTAL ELLIPSIS)인 ... 입니다. |
구문
형식 정의
초깃값 | none |
---|---|
적용 요소 | 모든 요소 |
상속 | 아니오 |
주의할 점
-webkit-line-clamp
속성을 구현하려면 두 가지 주의해야 할 점이 있습니다.
display: -webkit-box;
와 -webkit-box-orient: vertical;
를 필수로 적용
-webkit-line-clamp
속성은 display: -webkit-box;
와 -webkit-box-orient: vertical;
적용되어 있을 때 구현하는 속성입니다. 이 두 속성의 값이 적용되어 있지 않는 요소에는 적용되지 않습니다.
해당 요소의 overflow
속성의 값이 visible
이 아닌 값 적용
해당 요소의 overflow
속성의 값이 visible
이 아닌 값(hidden
, auto
, scroll
)으로 설정되어 있으면 지정된 줄 수로 제한해서 텍스트가 잘리지만, 그렇지 않으면 생략 부호로(...
)를 표시한 이 후에도 텍스트가 계속 표시됩니다.
다음은 해당 요소의 overflow
속성의 값을 visible
로 잘못 설정해서 생략 부호로(...
)를 표시한 이 후에도 텍스트가 계속 표시되는 예제입니다.
브라우저 호환
마지막 업데이트 정보: 2024-06-13
속성과 값 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
-webkit-line-clamp
|
6 | 17 | 68 | 5 |
none 값 |
지원하지 않음 | 지원하지 않음 | 68 | 지원하지 않음 |
명세서
명세서 사양 | |
---|---|
-webkit-line-clamp
|
CSS Overflow Module Level 4 #propdef--webkit-line-clamp |