Typography
특정 줄 수로 텍스트를 잘라내는 유틸리티
line-clamp-* 유틸리티를 사용하면 특정 줄 수 이후의 텍스트를 잘라낼 수 있습니다.
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="..." />
Lindsay Walton
</div>
</article>이전에 적용한 줄 제한(line clamp) 유틸리티를 해제하려면 line-clamp-none을 사용합니다.
<p class="line-clamp-3 lg:line-clamp-none">
<!-- ... -->
</p>Tailwind는 상태에 따라 유틸리티 클래스를 조건부로 적용할 수 있게 해줍니다. 예를 들어, hover:line-clamp-4 를 사용하면 line-clamp-4 유틸리티를 hover 상태에서만 적용할 수 있습니다.
<p class="line-clamp-3 hover:line-clamp-4">
<!-- ... -->
</p>
사용 가능한 모든 상태 수정자 목록은 호버, 포커스, & 기타 상태 문서를 참고하세요.
여러분은 반응형 브레이크포인트, 다크 모드, prefers-reduced-motion 등과 같은 미디어 쿼리를 타겟팅하기 위해 변형 수식어를 사용할 수 있습니다. 예를 들어, md:line-clamp-4를 사용하면 중간 화면 크기 이상에서만 line-clamp-4 유틸리티를 적용할 수 있습니다.
<p class="line-clamp-3 md:line-clamp-4">
<!-- ... -->
</p>
더 자세히 알아보려면 반응형 디자인, 다크 모드, 그리고 다른 미디어 쿼리 수식어에 대한 문서를 확인하세요.
기본적으로 Tailwind는 6개의 line-clamp 유틸리티를 제공합니다. tailwind.config.js 파일에서 theme.lineClamp 또는 theme.extend.lineClamp를 수정하여 이 값을 커스터마이징할 수 있습니다.
module.exports = {
theme: {
extend: {
lineClamp: {
7: '7',
},
}
}
}
기본 테마 커스터마이징에 대해 더 알아보려면 테마 커스터마이징 문서를 참고하세요.
테마에 포함시키기 어려운 line-clamp 값을 일회성으로 사용해야 한다면, 대괄호를 사용해 임의의 값으로 속성을 즉석에서 생성할 수 있습니다.
<p class="line-clamp-[7]">
<!-- ... -->
</p>
임의 값 지원에 대해 더 알아보려면 임의 값 문서를 참고하세요.
