Line Clamp
Line Clamp
여러 줄로 된 텍스트를 특정 줄 수 이후에서 잘라내는(truncate) 유틸리티예요. 카드나 글 목록에서 텍스트를 깔끔하게 제한할 때 유용해요.
출처: 문서
본문
ClassStyles
| Class | Properties |
|---|---|
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>; |
예시 (Examples)
기본 예시 (Basic example)
line-clamp-<number> 유틸리티를 line-clamp-2나 line-clamp-3처럼 사용하면 여러 줄로 된 텍스트를 특정 줄 수 이후에서 잘라낼 수 있어요.
<article>
<time>Mar 10, 2020</time>
<h2>Boost your conversion rate</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>
줄 클램프 해제하기 (Undoing line clamping)
line-clamp-none을 사용하면 이전에 적용한 line clamp 유틸리티를 해제할 수 있어요.
<p class="line-clamp-3 lg:line-clamp-none">
<!-- ... -->
</p>
사용자 정의 값 사용하기 (Using a custom value)
line-clamp-[<value>] 문법을 사용하면 완전히 사용자 정의한 값으로 줄 수를 정할 수 있어요.
<p class="line-clamp-[calc(var(--characters)/100)] ...">
Lorem ipsum dolor sit amet...
</p>
CSS 변수를 사용할 때는 line-clamp-(<custom-property>) 문법도 쓸 수 있어요.
<p class="line-clamp-(--my-line-count) ...">
Lorem ipsum dolor sit amet...
</p>
이것은 line-clamp-[var(<custom-property>)]의 줄임말로, var() 함수를 자동으로 붙여주는 것뿐이에요.
반응형 디자인 (Responsive design)
line-clamp 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면 중간 크기 화면 이상에서만 유틸리티가 적용되게 만들 수 있어요.
<div class="line-clamp-3 md:line-clamp-4 ...">
<!-- ... -->
</div>
변형(variant) 사용법에 대해 더 알아보려면 variants 문서를 확인해 보세요.