CSS: truncate ​

.--truncate — اقتطاع مع الحذف الوسطي مع تقييد الأسطر يتحكم به --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 — نسق نصي للجسم يتم اقتطاعه بواسطة هذا.