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%

浏览器支持

• 行数限制依赖于带有 display: -webkit-box 的 -webkit-line-clamp，并配合标准的 line-clamp 使用。

相关

• text — 此项截断所使用的正文排版。