CSS: truncate ​

.--truncate — Afsláttur með þrípunkti með línubindingu stjórnað af --lines — hægt að nota sem slíkt eða keðja við hvaða íhlut sem er (.instui-button.--truncate).

Grunnklasi notar display: -webkit-box og les sérsniðna eiginleikann --lines til að takmarka texta við fasta fjölda lína áður en hann endar með þrípunkti.

Source: index.ts

TIP

Krafa um JS — Þessi íhlutur sendir frá sér engan eigin CSS — uppbygging og hegðun kemur alfarið frá @pantoken/interactions. Breytirinn --max-lines-auto ræðst af þeirri hegðun. Sjá breytutöfluna hér að neðan.

Notkun ​

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

Dæmi ​

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

Breytingar ​

BreytiLýsing
.--lines-1Gælunafn fyrir --max-lines-1.
.--lines-2Gælunafn fyrir --max-lines-2.
.--lines-3Gælunafn fyrir --max-lines-3.
.--lines-4Gælunafn fyrir --max-lines-4.
.--lines-5Gælunafn fyrir --max-lines-5.
.--max-lines-1Takmarka við eina línu (sjálfgefið).
.--max-lines-2Takmarka við tvær línur.
.--max-lines-3Takmarka við þrjár línur.
.--max-lines-4Takmarka við fjórar línur.
.--max-lines-5Takmarka við fimm línur.
.--max-lines-autoInteraction — — Clamp to the number of lines that fit in the container, based on its height and the line height of the text.
.--truncateVirkjar skurð og línubindingu á tilteknum frumefni.
.--truncate-character(sjálfgefið) Afsmelltu á stafsstigi.
.--truncate-wordAfsmelltu á orðstigi.

Sérsniðnar eigindir ​

EiginleikiTegundSjálfgefiðLýsing
--ellipsisclip | ellipsis | <string> | fadeellipsis—
--lines<integer>1—

Notuð tákn ​

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

Vafrastuðningur ​

  • Línubinding byggir á -webkit-line-clamp með display: -webkit-box, í samspili við staðlaða line-clamp.

Tengdar ​

  • text — Líkamsletur sem þetta skerðir.