CSS: truncate

.--truncate — Ellipsis-afkapping met lijnbegrenzing geregeld door --lines — bruikbaar los of gekoppeld aan een component (.instui-button.--truncate).

De basislaag gebruikt display: -webkit-box en leest de custom property --lines om tekst tot een vast aantal regels te beperken voordat deze in een ellipsis eindigt.

Source: index.ts

TIP

JS-vereiste — Deze component bevat geen eigen CSS — de markup en het gedrag komen volledig van @pantoken/interactions. De modifier --max-lines-auto wordt door dat gedrag aangestuurd. Zie de modifiertabel hieronder.

Gebruik

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

Voorbeelden

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

Modifiers

Modifier	Beschrijving
.--lines-1	Alias van --max-lines-1.
.--lines-2	Alias van --max-lines-2.
.--lines-3	Alias van --max-lines-3.
.--lines-4	Alias van --max-lines-4.
.--lines-5	Alias van --max-lines-5.
.--max-lines-1	Beperk tot één regel (standaard).
.--max-lines-2	Beperk tot twee regels.
.--max-lines-3	Beperk tot drie regels.
.--max-lines-4	Beperk tot vier regels.
.--max-lines-5	Beperk tot vijf regels.
.--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	Zorgt voor afkapping en lijnbegrenzing op het doel-element.
.--truncate-character	(standaard) Afkappen op karakterniveau.
.--truncate-word	Afkappen op woordniveau.

Aangepaste eigenschappen

Eigenschap	Type	Standaard	Beschrijving
--ellipsis	clip | ellipsis | <string> | fade	ellipsis	—
--lines	<integer>	1	—

Gebruikte tokens

Token	Type	Waarde
--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%

Browserondersteuning

• Begrenzing is afhankelijk van -webkit-line-clamp met display: -webkit-box, gecombineerd met de standaard line-clamp.

Gerelateerd

• text — Body-typografie die hierdoor wordt afgekapt.