웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > css

[CSS] 여러줄의 멀티라인 생략기호 표시하는 방법, -webkit-line-clamp

Last Modified : 2020-07-15 / Created : 2017-03-17
4,575
View Count

브라우저에서 텍스트에 생략 기호를 적용하여 원하는 라인까지만 노출하는 방법을 알아봅니다. 어떻게 하면 가능할까요?

이때 -webkit-line-clamp 속성을 사용하는 방법이 있습니다. -webkit-line-clamp의 값만큼 해당하는 라인까지만 노출하고 이 후의 텍스트 라인은 ...으로 바뀌어 표시됩니다. 아래처럼 사용합니다.

-webkit-line-clamp: 5


이때 함께 필요한 css 프로퍼티들이 있는데 overflow, text-overflow, -webkit-box-orient 등입니다. 값은 아래에서 참고하세요.




# 멀티라인 텍스트에서 원하는 줄까지만 노출, 나머지 생략 방법

먼저 브라우저가 웹킷 엔진일 경우 적용 가능한 코드로 모든 브라우저에 적용되는 것은 아닙니다. 하지만 가장 간단하게 멀티라인 생략 기호 사용할 수 있다는 장점이 있습니다. 먼저 아래 코드를 봐주세요.

@ multiline.css
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
width: 120px;
여기서 -webkit-line-clamp 속성을 3으로 설정할 경우 3줄까지만 노출되고 나머지는 ...으로 표시됩니다. (세 줄만 표시되고 나머지는 생략기호로 대체).


예제코드를 만들어 보려고 합니다. 페이지 제일 하단에 1, 3, 5줄에 따라 어떻게 생략되어 나타나는지 알아보세요.
<p>1234567890 1234567890 1234567890 1234567890 1234567890 1234567890</p>

각각 1줄, 3줄, 5줄로 설정하였습니다.


! 참고사항

아쉽게도 웹킷 엔진의 브라우저만 가능하므로 호환을 위해서 스크립트를 사용하는 방법도 가능합니다. 이 경우 마지막 줄에만 text-overflow: hidden;을 사용하는 방법입니다. text-overflow는 아래에서 참고하세요.

텍스트 생략 바로가기 >
https://webisfree.com/2015-08-17/[css]-text-overflow-텍스트가-많은-경우-생략기호로-보여주기
 

아래는 실제 위 예제를 수행한 모습입니다.

Previous

CSS 파일에 html 주석처리가 필요한 이유

Previous

사용하지 않는 CSS를 제거하는 방법은?