CSS: truncate

.--truncate — קיצוץ עם אליפסיס ומגבלת שורות הנשלטת על ידי --lines — ניתן להשתמש כאלמנט עצמאי או לשרשור על כל קומפוננטה (.instui-button.--truncate).

מחלקת הבסיס משתמשת ב-display: -webkit-box וקוראת את תכונת ה-CSS המותאמת --lines כדי להגביל את הטקסט למספר קבוע של שורות לפני שהוא מסתיים באליפסיס.

Source: index.ts

TIP

דרישת JS — קומפוננטה זו אינה כוללת CSS משלה — הסימון וההתנהגות שלה מגיעים במלואם מ-@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	—

אסימוני צריכה

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 — טיפוגרפיית גוף שאותה זה מקצר.