CSS: truncate ​

.--truncate — एलिप्सिस ट्रंकैशन लाइन-क्लैम्पिंग द्वारा नियंत्रित, जो --lines से संचालित होता है — इकाई के रूप में या किसी भी घटक पर चेन करके उपयोग योग्य (.instui-button.--truncate).

बेस क्लास display: -webkit-box का उपयोग करता है और टेक्स्ट को निश्चित संख्या की लाइनों तक क्लैंप करने के लिए --lines कस्टम प्रॉपर्टी पढ़ता है, फिर अंत में एलिप्सिस दिखाता है।

Source: index.ts

TIP

JS आवश्यकता — यह घटक स्वयं कोई CSS नहीं भेजता — इसका मार्कअप और व्यवहार पूरी तरह से @pantoken/interactions से आता है। इसका --max-lines-auto मोडिफायर उस व्यवहार द्वारा नियंत्रित होता है। देखें modifier table below.

उपयोग ​

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%

ब्राउज़र समर्थन ​

  • क्लैंपिंग display: -webkit-box के साथ -webkit-line-clamp पर निर्भर करती है, जो मानक line-clamp के साथ जोड़ी जाती है।

संबंधित ​

  • पाठ — बॉडी टाइपोग्राफी जिसे यह ट्रंकेट करता है।