CSS: truncate

.--truncate — ellipsisa skorrástus ja čuovvutvuohta riimmuheapmái --lines gaskkal — lea barguheapmi eatnu dahje čuoŋat birra mihkkeha komponentta (.instui-button.--truncate).

Gaskavuohta luokka geavahusa display: -webkit-box ja lohká --lines sihkehaš čuovvutvuođa oahppat textta nummir vuostta riimmu oažžut muhto ellipsisa oktii.

Source: index.ts

TIP

JS-requirement — Dát komponentta ii reahkka CSS:s saját — mu divvut ja behavior bivdat juohke @pantoken/interactions. Su --max-lines-auto modifijára lea maid geavahan dán behaviorin ge. Lávvuot modifier table below.

Buktáhašvuohta

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

Exempla

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

Modifisuvnnat

Modifiserer	Deskripción
.--lines-1	Alias vuolggan --max-lines-1.
.--lines-2	Alias vuolggan --max-lines-2.
.--lines-3	Alias vuolggan --max-lines-3.
.--lines-4	Alias vuolggan --max-lines-4.
.--lines-5	Alias vuolggan --max-lines-5.
.--max-lines-1	Čuovvu vuogit ovttasriimma (default).
.--max-lines-2	Čuovvu vuogit guokte riimmu.
.--max-lines-3	Čuovvu vuogit golbma riimmu.
.--max-lines-4	Čuovvu vuogit nezza riimmu.
.--max-lines-5	Čuovvu vuogit vihtta riimmu.
.--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	Gevnná skorrástus ja riimmu čuovvutvuhta sihke elementtas.
.--truncate-character	(default) Skorrá evttohat signarma gidde.
.--truncate-word	Skorrá evttohat sõnna gidde.

Ovvun-propertijat

Property	Type	Default	Deskripción
--ellipsis	clip | ellipsis | <string> | fade	ellipsis	—
--lines	<integer>	1	—

Tokenat gaskkalit

Token	Type	Vaššun
--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%

Browsera geavahit

• Čuovvutvuohta lean -webkit-line-clamp ja display: -webkit-box gaskkal, ja duođa standard line-clamp.

Dálkkodat

• text — Boddu typografija mii dát skorrá.