CSS: truncate

.--truncate — Ellipsisavkortning med radbegränsning styrd av --lines — kan användas fristående eller kedjas på vilken komponent som helst (.instui-button.--truncate).

Bas-klassen använder display: -webkit-box och läser den anpassade egenskapen --lines för att klippa text till ett bestämt antal rader innan den slutar med ett ellipsis.

Source: index.ts

TIP

JS-krav — Denna komponent levererar ingen egen CSS — dess markup och beteende kommer helt från @pantoken/interactions. Dess --max-lines-auto-modifier styrs av det beteendet. Se modifieringstabellen nedan.

Användning

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

Exempel

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

Modifierare

Modifierare	Beskrivning
.--lines-1	Alias för --max-lines-1.
.--lines-2	Alias för --max-lines-2.
.--lines-3	Alias för --max-lines-3.
.--lines-4	Alias för --max-lines-4.
.--lines-5	Alias för --max-lines-5.
.--max-lines-1	Begränsa till en rad (standard).
.--max-lines-2	Begränsa till två rader.
.--max-lines-3	Begränsa till tre rader.
.--max-lines-4	Begränsa till fyra rader.
.--max-lines-5	Begränsa till fem rader.
.--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	Aktiverar trunkering och radbegränsning på målelementet.
.--truncate-character	(standard) Trunka på teckennivå.
.--truncate-word	Trunka på ordnivå.

Anpassade egenskaper

Egenskap	Typ	Standard	Beskrivning
--ellipsis	clip | ellipsis | <string> | fade	ellipsis	—
--lines	<integer>	1	—

Förbrukade tokens

Token	Typ	Värde
--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%

Webbläsarstöd

• Begränsning bygger på -webkit-line-clamp med display: -webkit-box, i kombination med standarden line-clamp.

Relaterat

• text — Brödtexttypografi som detta trunkerar.