CSS: truncate

.--truncate — 줄 수 제한으로 생략 부호를 자르는 기능으로 --lines로 제어됩니다 — 단독으로 사용하거나 어떤 컴포넌트에든 체인으로 연결해 사용할 수 있습니다 (.instui-button.--truncate).

기본 클래스는 display: -webkit-box을 사용하며 텍스트를 일정한 줄 수로 제한하여 말줄임표로 끝나도록 하는 데 --lines 커스텀 속성을 읽습니다.

Source: index.ts

TIP

JS 요구사항 — 이 컴포넌트 자체의 CSS는 포함되어 있지 않습니다 — 마크업과 동작은 전적으로 @pantoken/interactions에서 제공됩니다. 이 컴포넌트의 --max-lines-auto 수정자는 해당 동작에 의해 구동됩니다. 아래 수정자 표를 참조하세요.

사용법

@import "@pantoken/components/utilities.css";

예제들

<div class="--truncate">This text is clamped to one line by default and ends in an ellipsis.</div>
<div class="--truncate" style="--lines: 3">This text is clamped to three lines and ends in an ellipsis.</div>
<button class="instui-button --truncate">…</button>

수정자

수정자	설명
.--lines-1	--max-lines-1의 별칭입니다.
.--lines-2	--max-lines-2의 별칭입니다.
.--lines-3	--max-lines-3의 별칭입니다.
.--lines-4	--max-lines-4의 별칭입니다.
.--lines-5	--max-lines-5의 별칭입니다.
.--max-lines-1	한 줄로 줄이기 (기본값).
.--max-lines-2	두 줄로 줄이기.
.--max-lines-3	세 줄로 줄이기.
.--max-lines-4	네 줄로 줄이기.
.--max-lines-5	다섯 줄로 줄이기.
.--max-lines-auto	Interaction — — Clamp to the number of lines that fit in the container, based on its height and the line height of the text.
.--truncate	대상 요소에서 생략과 줄 수 제한 기능을 활성화합니다.
.--truncate-character	(기본값) 문자 단위로 잘라냅니다.
.--truncate-word	단어 단위로 잘라냅니다.

사용자 정의 속성

속성	타입	기본	설명
--ellipsis	clip | ellipsis | <string> | fade	ellipsis	—
--lines	<integer>	1	—

사용된 토큰

Token	타입	값
--instui-component-truncate-text-font-family	[ <font-family-name> | <generic-font-family> ]#	Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-line-height-paragraph-base	<percentage>	150%

브라우저 지원

• 줄 수 제한은 표준 line-clamp와 짝이 되는 -webkit-line-clamp와 display: -webkit-box에 의존합니다.

관련 항목

• text — 본문 타이포그래피(이 기능이 잘라내는 대상).