CSS: truncate ​

.--truncate — obcinanie z wielokropkiem z ograniczeniem liczby wierszy kontrolowanym przez --lines — można używać solo lub łączyć z dowolnym komponentem (.instui-button.--truncate).

Klasa bazowa używa display: -webkit-box i odczytuje niestandardową właściwość --lines, aby ograniczyć tekst do stałej liczby wierszy przed zakończeniem wielokropkiem.

Source: index.ts

TIP

Wymaganie JS — Ten komponent nie dostarcza własnego CSS — jego strukturę i zachowanie zapewnia w całości @pantoken/interactions. Modyfikator --max-lines-auto jest sterowany przez to zachowanie. Zobacz tabelę modyfikatorów poniżej.

Użycie ​

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

Przykłady ​

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>

Modyfikatory ​

ModyfikatorOpis
.--lines-1Alias dla --max-lines-1.
.--lines-2Alias dla --max-lines-2.
.--lines-3Alias dla --max-lines-3.
.--lines-4Alias dla --max-lines-4.
.--lines-5Alias dla --max-lines-5.
.--max-lines-1Ogranicz do jednego wiersza (domyślnie).
.--max-lines-2Ogranicz do dwóch wierszy.
.--max-lines-3Ogranicz do trzech wierszy.
.--max-lines-4Ogranicz do czterech wierszy.
.--max-lines-5Ogranicz do pięciu wierszy.
.--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.
.--truncateWłącza obcinanie i ograniczanie liczby wierszy na docelowym elemencie.
.--truncate-character(domyślnie) Obcinaj na poziomie znaków.
.--truncate-wordObcinaj na poziomie słów.

Własne właściwości ​

WłaściwośćTypDomyślnyOpis
--ellipsisclip | ellipsis | <string> | fadeellipsis—
--lines<integer>1—

Zużyte tokeny ​

TokenTypWartość
--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%

Wsparcie przeglądarek ​

  • Ograniczanie opiera się na -webkit-line-clamp z display: -webkit-box, w parze ze standardowym line-clamp.

Powiązane ​

  • text — typografia body, którą to obcina.