CSS: truncate

.--truncate — Αποκοπή με αποσιωπητικά και περιορισμό γραμμών ελεγχόμενο από --lines — μπορεί να χρησιμοποιηθεί μόνο του ή αλυσιδωτά σε οποιοδήποτε στοιχείο (.instui-button.--truncate).

Η βασική κλάση χρησιμοποιεί display: -webkit-box και διαβάζει την προσαρμοσμένη ιδιότητα --lines για να περιορίσει το κείμενο σε σταθερό αριθμό γραμμών πριν τελειώσει με αποσιωπητικά.

Source: index.ts

TIP

Απαίτηση JS — Αυτό το στοιχείο δεν περιλαμβάνει δικό του CSS — το markup και η συμπεριφορά του προέρχονται εξ ολοκλήρου από @pantoken/interactions. Ο τροποποιητής --max-lines-auto καθορίζεται από αυτή τη συμπεριφορά. Δείτε τον πίνακα τροποποιητών παρακάτω.

Χρήση

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

Παραδείγματα

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

Τροποποιητές

Τροποποιητής	Περιγραφή
.--lines-1	Ψευδώνυμο του --max-lines-1.
.--lines-2	Ψευδώνυμο του --max-lines-2.
.--lines-3	Ψευδώνυμο του --max-lines-3.
.--lines-4	Ψευδώνυμο του --max-lines-4.
.--lines-5	Ψευδώνυμο του --max-lines-5.
.--max-lines-1	Περιορισμός σε μία γραμμή (προεπιλογή).
.--max-lines-2	Περιορισμός σε δύο γραμμές.
.--max-lines-3	Περιορισμός σε τρεις γραμμές.
.--max-lines-4	Περιορισμός σε τέσσερις γραμμές.
.--max-lines-5	Περιορισμός σε πέντε γραμμές.
.--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	Ενεργοποιεί την αποκοπή και τον περιορισμό γραμμών στο στοιχείο-στόχο.
.--truncate-character	(προεπιλογή) Αποκόπτει σε επίπεδο χαρακτήρα.
.--truncate-word	Αποκόπτει σε επίπεδο λέξης.

Προσαρμοσμένες ιδιότητες

Ιδιότητα	Τύπος	Προεπιλογή	Περιγραφή
--ellipsis	clip | ellipsis | <string> | fade	ellipsis	—
--lines	<integer>	1	—

Καταναλωμένα tokens

Token	Τύπος	Τιμή
--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%

Υποστήριξη προγράμματος περιήγησης

• Ο περιορισμός βασίζεται στο -webkit-line-clamp με display: -webkit-box, σε συνδυασμό με το στάνταρ line-clamp.

Σχετιζόμενα

• text — Η τυπογραφία σώματος που αυτό αποκόπτει.