CSS: truncate

.--truncate — Ellipszis-alapú levágás, ahol a sortörést a --lines szabályozza — önállóan vagy bármely komponensre láncolva használható (.instui-button.--truncate).

Az alap osztály display: -webkit-box-t használ és a --lines egyéni tulajdonságot olvassa, hogy a szöveget meghatározott számú sorra korlátozza, majd ellipszissel lezárja.

Source: index.ts

TIP

JS követelmény — Ez a komponens nem tartalmaz saját CSS-t — a markupja és viselkedése teljesen @pantoken/interactions-ból származik. A --max-lines-auto módosítót ez a viselkedés hajtja. Lásd a módosítók táblázatát.

Használat

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

Példák

<div class="--truncate">Ez a szöveg alapértelmezés szerint egy sorra van korlátozva, és három ponttal végződik.</div>
<div class="--truncate" style="--lines: 3">Ez a szöveg három sorra van korlátozva, és három ponttal végződik.</div>
<button class="instui-button --truncate">…</button>

Módosítók

Módosító	Leírás
.--lines-1	--max-lines-1 aliasa.
.--lines-2	--max-lines-2 aliasa.
.--lines-3	--max-lines-3 aliasa.
.--lines-4	--max-lines-4 aliasa.
.--lines-5	--max-lines-5 aliasa.
.--max-lines-1	Kikényszerítés egy sorra (alapértelmezett).
.--max-lines-2	Kikényszerítés két sorra.
.--max-lines-3	Kikényszerítés három sorra.
.--max-lines-4	Kikényszerítés négy sorra.
.--max-lines-5	Kikényszerítés öt sorra.
.--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	Engedélyezi a levágást és a sor-korlátozást a cél elemen.
.--truncate-character	(alapértelmezett) Karakterszinten vágja le.
.--truncate-word	Szószinten vágja le.

Egyéni tulajdonságok

Tulajdonság	Típus	Alapértelmezett	Leírás
--ellipsis	clip | ellipsis | <string> | fade	ellipsis	—
--lines	<integer>	1	—

Fogyasztott tokenek

Token	Típus	Érték
--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%

Böngészőtámogatás

• A sor-korlátozás a -webkit-line-clamp-re támaszkodik display: -webkit-box-vel, párosítva a szabványos line-clamp-vel.

Kapcsolódó

• text — A törzsszöveg tipográfiája, amelyet ez levág.