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">Цей текст за замовчуванням обрізається до одного рядка й закінчується многоточчям.</div>
<div class="--truncate" style="--lines: 3">Цей текст обрізається до трьох рядків і закінчується многоточчям.</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 — типографіка тіла, яку це усікає.