텍스트 생략

클래스

두 방식 모두 너비에 제약이 필요합니다. Flex 또는 Grid 항목 안에서는 해당 항목에 min-w(0)을 지정해 줄어들 수 있게 하세요.

보이는 텍스트를 제한하되 전체 내용에 접근할 수 있게 합니다

truncate는 넘친 내용 숨기기, 말줄임표, 줄바꿈 금지를 결합합니다. 오버플로가 발생하려면 인라인 너비가 유한한 블록 컨테이너가 필요합니다. 너비에 제약이 없는 인라인 span에 적용해도 한 줄 미리보기가 되지는 않습니다.

글꼴, 너비, 텍스트는 같고 생략 클래스만 달라집니다. 말줄임표는 브라우저가 네이티브로 그리며 각 요소에는 전체 문자열이 남아 있습니다.

텍스트 설명

1. 각 텍스트는 너비 192px, 글꼴 크기 14px, 줄 높이 24px입니다.
2. 첫 번째 텍스트는 자유롭게 줄바꿈하며 모든 줄을 담도록 높아집니다. truncate는 두 번째를 한 줄로 유지하고 넘친 부분을 말줄임표로 숨깁니다.
3. clamp-lines(2)는 세 번째 텍스트의 줄바꿈을 허용한 다음 접두사가 있는 line-clamp 조합으로 보이는 내용을 두 줄로 제한합니다.
4. 세 요소 모두 같은 전체 문자열을 포함합니다. 독자가 전체 텍스트를 눈으로 읽어야 한다면 별도의 펼치기 기능이나 링크가 필요합니다.

clamp-lines(2)는 접두사가 있는 line-clamp 조합을 사용합니다. 즉, display: -webkit-box, 세로 상자 방향, 두 줄 제한, 넘친 내용 숨기기를 설정합니다. 양의 정수를 사용하세요. 줄바꿈을 허용하므로 truncate 및 그 안의 white-space: nowrap과 함께 사용하지 마세요.

텍스트는 DOM에 그대로 남습니다. 잘라 내기는 시각적 제약일 뿐 문자열을 줄이거나 내용을 펼치는 기능을 제공하지 않습니다. 중요한 정보는 실제 링크나 펼칠 수 있는 전체 텍스트 보기로 접근할 수 있게 하고, 마우스를 올릴 때만 보이는 title에 의존하지 마세요.

Flex 또는 Grid 항목의 자동 최소 크기 때문에 항목이 가용 공간보다 넓게 유지될 수 있습니다. 줄어들어야 할 항목에 min-w(0)을 설정한 다음 안쪽 텍스트를 제한하세요. 줄 수를 제한할 때는 padding 때문에 숨긴 줄이 드러나지 않도록 padding을 래퍼에 지정하세요.

이 조합 스타일은 display와 overflow 선언을 자체적으로 설정합니다. 이를 flex, grid 또는 보이는 오버플로로 덮어쓰면 줄 수 제한이 깨질 수 있습니다. 사용자 정의 생략 규칙이 필요하면 네이티브 속성을 명시적으로 사용하세요.

관련 문서: 네이티브 텍스트 오버플로, 레거시 줄 수 제한.

사용 예

파일 이름은 한 줄로, 요약은 두 줄로 제한합니다. 세부 정보를 펼치면 둘 다 전체 내용을 읽을 수 있습니다.

<article class="… max-w-3xs">  <p class="… truncate">field-notes-autumn-collection-final-v03.fig</p>  <p class="… clamp-lines(2)">Good interfaces make space for…</p>  <details><summary>Read full details</summary><p>field-notes-autumn-collection-final-v03.fig</p><p>Good interfaces make space for…</p></details></article>

@layer theme {  :root,  :host {    --container-3xs: 16rem  }}@layer utilities {  .clamp-lines\(2\) {    display: -webkit-box;    -webkit-box-orient: vertical;    -webkit-line-clamp: 2;    overflow: hidden;    overflow-wrap: break-word;    text-overflow: ellipsis  }  .truncate {    overflow: hidden;    text-overflow: ellipsis;    white-space: nowrap  }  .max-w-3xs {    max-width: var(--container-3xs)  }}

사용자 정의

프리셋은 이 클래스를 @utility로 정의합니다. 스타일시트에서 같은 이름을 정의하면 기존 정의를 대체합니다.

@utility truncate {  overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;}@utility clamp-lines(--n <integer>) {  display: -webkit-box;  -webkit-box-orient: vertical;  -webkit-line-clamp: var(--n);  overflow: hidden;  overflow-wrap: break-word;  text-overflow: ellipsis;}

관련 문서: 유틸리티 정의, 타이포그래피.