ब्लॉक-ओवरफ्लो - सीएसएस-ट्रिक्स

block-overflowसंपत्ति पाठ ट्रंकेटस और इंगित करता है और अधिक सामग्री लाइनों कि द्वारा निर्धारित है की संख्या के बाद एक अंडाकार या कस्टम स्ट्रिंग डालने से इस प्रकार max-linesसंपत्ति।

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

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

.module ( block-overflow: (clip | ellipsis | ); max-lines: (); /* required by block-overflow */ )

block-overflow निम्नलिखित मूल्यों को स्वीकार करता है:

• clip: अनुसरण करने के लिए अधिक पाठ इंगित करने के लिए कोई वर्ण सम्मिलित नहीं करता है। इसके बजाय, सामग्री को केवल काट दिया जाता है और अंतिम वर्ण पर काट दिया जाता है।
• ellipsis: अंतिम पंक्ति के अंत में एक दीर्घवृत्त (…) प्रदर्शित करता है। इसे यूनिकोड वर्ण (U + 2026) के रूप में प्रस्तुत किया जाना चाहिए, लेकिन इसका उपयोग उपयोगकर्ता-एजेंट की सामग्री भाषा और लेखन मोड के आधार पर एक समकक्ष द्वारा किया जा सकता है।
• : अंतिम पंक्ति के अंत में कस्टम पाठ (उदाहरण के लिए "और पढ़ें →") प्रदर्शित करता है। युक्ति कहती है कि यदि स्ट्रिंग "बेतुका" है तो उपयोगकर्ता-एजेंट स्ट्रिंग को एक दीर्घवृत्त के साथ बदल सकता है।

फिर, यह सब प्रायोगिक, प्रगति कार्य है। ये मूल्य बदल सकते हैं। या, और जोड़ा जा सकता है। उदाहरण के लिए, एक "होशियार" दीर्घवृत्त के लिए कॉल किया गया है जो अधिक चीजें करने में सक्षम हो सकता है, जैसे बीच में पाठ को क्रॉप करना:

One thing led to another and… yada yada yada, that was that.

line-clampकम के लिए उपयोग करें

हम केवल उसी चीज़ के बारे में प्राप्त कर सकते हैं line-clampजिसका उपयोग block-overflowऔर max-linesगुणों के लिए शॉर्टहैंड है ।

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

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

फिलहाल कोई भी नहीं है, लेकिन आप WebKit के मालिकाना कार्यान्वयन के उपयोग से कुछ सहायता प्राप्त कर सकते हैं line-clamp:

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

डेस्कटॉप

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

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

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