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%

瀏覽器支援

• 行數限制依賴 -webkit-line-clamp 與 display: -webkit-box，並搭配標準的 line-clamp 使用。

相關

• text — 此截斷所屬的主體排版。