CSS: truncate ​

.--truncate — Kolmen pisteen katkaisu rivirajoituksella, jota ohjaa --lines — käytettävissä itsenäisenä tai ketjutettuna mihin tahansa komponenttiin (.instui-button.--truncate).

Perusluokka käyttää display: -webkit-box-ominaisuutta ja lukee --lines-muuttujaa rajoittaakseen tekstin tiettyyn rivimäärään ennen kuin se päättyy ellipsiin.

Source: index.ts

TIP

JS-vaatimus — Tämä komponentti ei sisällä omaa CSS:ää — sen merkintä ja käyttäytyminen tulevat kokonaan @pantoken/interactions:sta. Sen --max-lines-auto-muunnin on tuon käyttäytymisen ohjaama. Katso muuttujataulukko alla.

Käyttö ​

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

Esimerkit ​

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>

Muokkaajat ​

MuokkaajaKuvaus
.--lines-1Alias --max-lines-1:lle.
.--lines-2Alias --max-lines-2:lle.
.--lines-3Alias --max-lines-3:lle.
.--lines-4Alias --max-lines-4:lle.
.--lines-5Alias --max-lines-5:lle.
.--max-lines-1Rajoita yhteen riviin (oletus).
.--max-lines-2Rajoita kahteen riviin.
.--max-lines-3Rajoita kolmeen riviin.
.--max-lines-4Rajoita neljään riviin.
.--max-lines-5Rajoita viiteen riviin.
.--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.
.--truncateMahdollistaa katkaisun ja rivirajoituksen kohde‑elementissä.
.--truncate-character(oletus) Katkaise merkki­tasolla.
.--truncate-wordKatkaise sanan tasolla.

Mukautetut ominaisuudet ​

OminaisuusTyyppiOletusKuvaus
--ellipsisclip | ellipsis | <string> | fadeellipsis—
--lines<integer>1—

Käytetyt tokenit ​

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

Selaintuki ​

  • Rivirajoitus perustuu -webkit-line-clamp:aan ja display: -webkit-box:iin, yhdistettynä standardiin line-clamp:een.

Liittyvät ​

  • text — Runko­typografia, jonka tämä katkaisee.