CSS: truncate

.--truncate — Hárompontos szövegcsonkítás a(z) --lines által vezérelt sorkorlátozással — önállóan vagy bármely komponenshez láncolva használható (.instui-button.--truncate).

Az alaposztály a(z) display: -webkit-box értéket használja, és beolvassa a(z) --lines egyéni tulajdonságot a szöveg fix sorszámra való korlátozásához, mielőtt az három ponttal végződne.

Forrás: index.ts

TIP

JS-követelmény — Ez a komponens nem tartalmaz saját CSS-t — a jelölése és a viselkedése teljes egészében a(z) @pantoken/interactions elemből származik. A(z) --max-lines-auto módosítóját ez a viselkedés vezérli. Lásd az alábbi módosítótáblázatot.

Használat

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

Példák

<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>

Módosítók

Módosító	Leírás
.--lines-1	A(z) --max-lines-1 aliasa.
.--lines-2	A(z) --max-lines-2 aliasa.
.--lines-3	A(z) --max-lines-3 aliasa.
.--lines-4	A(z) --max-lines-4 aliasa.
.--lines-5	A(z) --max-lines-5 aliasa.
.--max-lines-1	Korlátozás egy sorra (alapértelmezett).
.--max-lines-2	Korlátozás két sorra.
.--max-lines-3	Korlátozás három sorra.
.--max-lines-4	Korlátozás négy sorra.
.--max-lines-5	Korlátozá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 csonkítást és a sorszám-korlátozást a célelemen.
.--truncate-character	(alapértelmezett) Csonkolás karakterszinten.
.--truncate-word	Csonkolás szószinten.

Egyéni tulajdonságok

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

Felhasznált 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 sorszám-korlátozás a(z) -webkit-line-clamp és a(z) display: -webkit-box használatán alapul, párosítva a szabványos line-clamp értékkel.

Kapcsolódó

• text — Szövegtípus, amelyet ez csonkít.