CSS: truncate ​

.--truncate — усечение с помощью многоточия с ограничением по строкам, управляемое через --lines — можно использовать отдельно или в цепочке с любым компонентом (.instui-button.--truncate).

Базовый класс использует display: -webkit-box и читает пользовательское свойство --lines, чтобы ограничить текст фиксированным количеством строк до окончания многоточием.

Source: index.ts

TIP

Требование JS — Этот компонент не содержит собственного CSS — его разметка и поведение полностью обеспечиваются @pantoken/interactions. Модификатор --max-lines-auto управляется этим поведением. См. таблицу модификаторов ниже.

Использование ​

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

Примеры ​

html
<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-autoInteraction — — 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Усекать на уровне слов.

Пользовательские свойства ​

СвойствоТипПо умолчаниюОписание
--ellipsisclip | ellipsis | <string> | fadeellipsis—
--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 — типографика тела, которую это усечёт.