CSS: truncate ​

.--truncate — کوتاه‌سازی با نبش‌نشانه (ellipsis) همراه با محدودیت سطری که توسط --lines کنترل می‌شود — قابل استفاده به‌تنهایی یا الحاق‌شده به هر کامپوننتی (.instui-button.--truncate).

کلاس پایه از display: -webkit-box استفاده می‌کند و مقدار خصوصیت سفارشی --lines را می‌خواند تا متن را به تعداد ثابت خطوط محدود کند و سپس با نبش‌نشانه پایان یابد.

Source: index.ts

TIP

نیازمندی JS — این کامپوننت هیچ CSS مخصوص به خود را ارسال نمی‌کند — نشانه‌گذاری و رفتار آن به‌طور کامل از @pantoken/interactions تامین می‌شود. مبدل --max-lines-auto آن توسط همان رفتار هدایت می‌شود. جدول مبدل‌ها در پایین را ببینید.

نحوه استفاده ​

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

نمونه‌ها ​

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>

تعدیل‌کننده‌ها ​

تعدیل‌کنندهتوضیحات
.--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-autoInteraction — — 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کوتاه‌سازی در سطح کلمه.

خواص سفارشی ​

خاصیتنوعپیش‌فرضتوضیحات
--ellipsisclip | ellipsis | <string> | fadeellipsis—
--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 — تایپوگرافی بدنه که این مورد آن را کوتاه می‌کند.