लाइन-क्लैंप - सीएसएस-ट्रिक्स

line-clampलाइनों की एक विशिष्ट संख्या में संपत्ति ट्रंकेटस पाठ।

इसके लिए कल्पना वर्तमान में एक संपादक का मसौदा है, इसलिए इसका मतलब है कि यहां कुछ भी पत्थर में सेट नहीं है क्योंकि यह प्रगति पर काम है। उस ने कहा, यह एक शॉर्टहैंड के रूप में परिभाषित किया गया है max-linesऔर block-overflow, जिसमें से पूर्व को कैंडिडेट सिफारिश में गिराए जाने के जोखिम के रूप में नोट किया गया है।

यह देखने के लिए आसान है कि max-linesयह कैसे निक्सन होगा क्योंकि यह फ़ंक्शन है (ट्रंकिंग से पहले लाइनों की संख्या स्थापित करना) पहले से ही बेक किया गया है line-clampऔर आगे की अमूर्तता अनावश्यक हो सकती है। लेकिन यह हमें पटरी से उतार रहा है, तो चलिए आगे बढ़ते हैं।

वाक्य - विन्यास

.module ( line-clamp: (none | ); )

line-clamp कल्पना के वर्तमान मसौदे में निम्नलिखित मूल्यों को स्वीकार करता है:

• none: लाइनों की संख्या पर कोई अधिकतम सेट नहीं करता है और परिणामस्वरूप कोई ट्रंकेशन नहीं होगा।
• : सामग्री को रौंदने से पहले लाइनों की अधिकतम संख्या निर्धारित करता है और फिर अंतिम पंक्ति के अंत में एक दीर्घवृत्त (…) प्रदर्शित करता है।

उस दीर्घवृत्त को एक यूनिकोड वर्ण (U + 2026) के रूप में प्रस्तुत किया जाना चाहिए, लेकिन इसका उपयोग उपयोगकर्ता-एजेंट की सामग्री भाषा और लेखन मोड के आधार पर एक समकक्ष द्वारा किया जा सकता है।

अरे, क्या मैं पाठ-अतिप्रवाह के साथ ऐसा नहीं कर सकता?

निष्पक्ष सवाल, मेरे दोस्त, और जवाब है, अच्छी तरह से ...

(देखो, वहां मैंने क्या किया था?)

… सॉर्टा।

text-overflowवास्तव में एक ellipsisमूल्य है जो पाठ को काट देगा:

.truncate ( text-overflow: ellipsis; /* Needed to make it work */ overflow: hidden; white-space: nowrap; )

कोड पाठ पर ज्योफ ग्राहम (@geoffgraham) द्वारा पेन टेक्स्ट-ओवरफ्लो देखें।

अच्छा अच्छा, यह एक अच्छी शुरुआत है। लेकिन क्या होगा अगर हम दीर्घवृत्त को पहली पंक्ति में नहीं बल्कि कहीं और कहना चाहते हैं, पाठ की तीसरी पंक्ति?

वहीं line-clampसे खेल में आता है। बस ध्यान दें कि इसे बनाने के लिए तीन गुणों के संयोजन का उपयोग किया जाता है:

.line-clamp ( display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; )

कोडऑन पर ज्यॉफ ग्राहम (@geoffgraham) द्वारा पेन लाइन-क्लैंप (-webkit) देखें।

फ़ायरफ़ॉक्स अब इसका समर्थन करता है, ठीक इसी तरह से ( -webkit-उपसर्गों और सभी के साथ)।

तो, क्या पकड़ है?

फिलहाल, यह ब्राउजर सपोर्ट है। लाइन क्लैम्प सीएसएस ओवरफ्लो मॉड्यूल लेवल 3 का हिस्सा है जो वर्तमान में एडिटर के ड्राफ्ट में है और फिलहाल पूरी तरह से असमर्थित है।

हम एक -webkit-उपसर्ग के साथ कुछ लाइन क्लैंपिंग एक्शन प्राप्त कर सकते हैं (जो, अजीब तरह से पर्याप्त है, सभी प्रमुख ब्राउज़रों में काम करता है)। वास्तव में, यह है कि ऊपर डेमो कैसे किया गया था।

अगर हम चाहें तो हम जावास्क्रिप्ट रास्ते पर जा सकते हैं। Clamp.js चाल करेंगे:

CodePen पर ज्योफ ग्राहम (@geoffgraham) द्वारा पेन लाइन-क्लैम्प (clamp.js) देखें।

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

यह WebKit के औचित्य और लाइन क्लैंप के निर्विवाद कार्यान्वयन के लिए समर्थन है।

यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।

डेस्कटॉप

क्रोम	फ़ायर्फ़ॉक्स	अर्थात	एज	सफारी
14 *	68 *	नहीं न	१।	5 *

मोबाइल / टेबलेट

Android क्रोम	Android फ़ायरफ़ॉक्स	एंड्रॉयड	iOS सफारी
88 *	85 *	2.3 *	5.0-5.1 *