타이포그래피
특정 줄 수로 텍스트를 잘라내는 유틸리티입니다.
| Class | Styles |
|---|---|
line-clamp-<number> | overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: <number>; |
line-clamp-none | overflow: visible;
display: block;
-webkit-box-orient: horizontal;
-webkit-line-clamp: unset; |
line-clamp-(<custom-property>) | overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: var(<custom-property>); |
line-clamp-[<value>] | overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: <value>; |
line-clamp-<number> 유틸리티를 사용하여 여러 줄의 텍스트를 특정 줄 수 이후에 잘라낼 수 있습니다. 예를 들어 line-clamp-2와 line-clamp-3를 사용해 보세요:
Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim.
Lindsay Walton<article> <time>2020년 3월 10일</time> <h2>전환율 높이기</h2> <p class="line-clamp-3"> Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim. </p> <div> <img src="/img/lindsay.jpg" /> Lindsay Walton </div></article>이전에 적용한 줄 제한(line clamp) 유틸리티를 해제하려면 line-clamp-none을 사용하세요:
<p class="line-clamp-3 lg:line-clamp-none"> <!-- ... --></p>line-clamp-[<value>] 구문을 사용하세요 number of lines를 완전히 커스텀한 값으로 설정하려면:
<p class="line-clamp-[calc(var(--characters)/100)] ..."> <!-- ... --></p>CSS 변수를 사용하려면 line-clamp-(<custom-property>) 구문을 사용할 수도 있습니다:
<p class="line-clamp-(--my-line-count) ..."> <!-- ... --></p>이는 line-clamp-[var(<custom-property>)] 의 단축 표현으로, 자동으로 var() 함수를 추가해 줍니다.
접두사 a line-clamp 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<div class="line-clamp-3 md:line-clamp-4 ..."> <!-- ... --></div>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
