केवल CSS के साथ पाठ की पंक्तियों को कैसे सीमित करें

किसी तत्व में पाठ की मात्रा को सीमित करना एक सामान्य वेब डिज़ाइन आवश्यकता है। आप अक्सर एक बटन के साथ एक तीन- या चार-पंक्ति अंश वाला एक लेख देखेंगे जो आपको पूर्ण पाठ का विस्तार करने देता है।

आप इस डिज़ाइन को CSS और JavaScript के संयोजन का उपयोग करके बना सकते हैं। लेकिन आप अकेले CSS का इस्तेमाल करके भी ऐसा कर सकते हैं। किसी बॉक्स में टेक्स्ट को सीमित करने के दो तरीके खोजें और जानें कि कैसे आप केवल CSS का उपयोग करके डायनेमिक एक्सपैंड बटन बना सकते हैं।

वेबकिट तकनीक

एक खाली फोल्डर बनाएं और उसमें दो फाइलें संपादित करें: index.html और शैली.सीएसएस. के अंदर index.html फ़ाइल, एक HTML कंकाल बनाएँ:

एचटीएमएल>
<एचटीएमएललैंग="एन">
<सिर>
<शीर्षक>दस्तावेज़शीर्षक>
<जोड़नासंबंधित="शैली पत्रक"href="शैली.सीएसएस">
सिर>
<शरीर>
शरीर>
एचटीएमएल>

में एक कड़ी अनुभाग, को शैली.सीएसएस फ़ाइल, यह सुनिश्चित करता है कि आप उस फ़ाइल में जो भी सीएसएस जोड़ते हैं वह इस पृष्ठ पर लागू होगा। इसके बाद, निम्न HTML मार्कअप को में टैग करें index.html:

<अनुभागकक्षा="कार्ड समूह">
<लेखकक्षा="कार्ड">
<एच 2>अनुच्छेद 1एच 2>
<पीकक्षा="कटऑफ-टेक्स्ट">
 300 शब्दों का टेक्स्ट यहां जाता है
पी>
<इनपुटप्रकार="चेकबॉक्स"कक्षा="एक्सपैंड-बीटीएन">
लेख>
<लेखकक्षा="कार्ड">
<एच 2>अनुच्छेद 2एच 2>
<पीकक्षा="कटऑफ-टेक्स्ट">
 200 शब्दों का पाठ यहाँ जाता है
पी>
<इनपुटप्रकार="चेकबॉक्स"कक्षा="एक्सपैंड-बीटीएन">
लेख>
<लेखकक्षा="कार्ड">
<एच 2>अनुच्छेद 1एच 2>
<पीकक्षा="कटऑफ-टेक्स्ट">
 100 शब्दों का टेक्स्ट यहां जाता है
पी>
<इनपुटप्रकार="चेकबॉक्स"कक्षा="एक्सपैंड-बीटीएन">
लेख>
अनुभाग>

इस HTML का structure simple है फिर भी ये अभी भी इस्तमाल करता है अभिगम्यता के लिए सिमेंटिक मार्कअप. एक खंड तत्व में तीन लेख तत्व होते हैं। प्रत्येक लेख में एक शीर्षक, एक पैराग्राफ और एक इनपुट तत्व होता है। आप प्रत्येक लेख अनुभाग को कार्ड में शैलीबद्ध करने के लिए CSS का उपयोग करेंगे।

इस बीच, आपका पेज इस तरह दिखेगा:

ऊपर की छवि से, आप प्रत्येक पैराग्राफ में पाठ की अलग-अलग लंबाई देख सकते हैं। पहले में 300 शब्द, दूसरे में 200 शब्द और तीसरे में 100 शब्द।

अगला कदम सीएसएस को जोड़कर पेज को स्टाइल करना शुरू करना है शैली.सीएसएस फ़ाइल। दस्तावेज़ पर सीमा को रीसेट करके और शरीर को सफेद रंग की पृष्ठभूमि का रंग देकर प्रारंभ करें:

*, *::पहले, *::बाद {
बॉक्स आकार: सीमा बॉक्स;
}
शरीर {
पृष्ठभूमि: #f3f3f3;
अतिप्रवाह: छिपा हुआ;
}

अगला, तत्व को कार्ड-समूह वर्ग के साथ तीन कॉलम वाले ग्रिड कंटेनर में बदल दें। प्रत्येक लेख अनुभाग में एक स्तंभ होता है:

कार्ड समूह {
दिखाना: जाल;
ग्रिड-टेम्प्लेट-कॉलम: दोहराना(3, 1फादर);
अंतर: .5रेम;
संरेखित-आइटम: फ्लेक्स-स्टार्ट;
}

प्रत्येक लेख अनुभाग को सफेद पृष्ठभूमि रंग और काले, थोड़े गोल बॉर्डर वाले कार्ड के रूप में स्टाइल करें:

कार्ड {
पृष्ठभूमि: सफ़ेद;
गद्दी: 1रेम;
सीमा: 1पिक्सलठोसकाला;
बॉर्डर-त्रिज्या: .25em;
}

अंत में, कुछ मार्जिन जोड़ें:

एच 2, पी {
अंतर: 0;
}
एच 2 {
मार्जिन नीचे: 1रेम;
}

फ़ाइल सहेजें और अपने ब्राउज़र की जाँच करें। पृष्ठ को नीचे दी गई छवि में दिखाए गए पृष्ठ जैसा दिखना चाहिए:

अगला चरण प्रत्येक पाठ के लिए पंक्तियों की संख्या को घटाकर 3 करना है। यहाँ उसके लिए CSS है:

.कटऑफ-पाठ {
--मैक्स-लाइन्स: 3; 
अतिप्रवाह: छिपा हुआ;

दिखाना: -वेबकिट-बॉक्स; 
-वेबकिट-बॉक्स-उन्मुख: खड़ा;
-वेबकिट-लाइन-क्लैंप: वर(--मैक्स-लाइन्स);
}

सेटिंग से शुरू करें एक सीएसएस चर, अधिकतम-पंक्तियाँ, 3 तक और अतिप्रवाहित सामग्री को छिपाना। फिर डिस्प्ले को सेट करें -वेबकिट-बॉक्स और लाइन को 3 से जकड़ें।

निम्न छवि परिणाम दिखाती है। प्रत्येक कार्ड पाठ की तीसरी पंक्ति पर एक दीर्घवृत्त प्रदर्शित करता है:

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

पाठ में पंक्तियों की संख्या को सीमित करने के लिए एक अधिक लचीला दृष्टिकोण

यह तकनीक आपको वेबकिट दृष्टिकोण के समान परिणाम के साथ वही काम करने की अनुमति देती है। लेकिन बड़ा अंतर यह है कि आपके पास बहुत अधिक लचीलापन है क्योंकि आप ऊंचाई स्वयं निर्धारित कर रहे हैं। साथ ही आप किसी भी डिस्प्ले प्रॉपर्टी या अपनी पसंद के स्टाइलिंग विकल्प का उपयोग कर सकते हैं।

आरंभ करने के लिए, के लिए CSS ब्लॉक को बदलें .कटऑफ-पाठ इस के साथ:

.कटऑफ-पाठ {
--मैक्स-लाइन्स: 5;
--ऊंची लाईन: 1.4;
ऊंचाई: कैल्क(वर(--मैक्स-लाइन्स) * 1ईएम * वर(--ऊंची लाईन));
ऊंची लाईन: वर(--ऊंची लाईन);
पद: रिश्तेदार;
}

रेखा की ऊँचाई निर्धारित करना महत्वपूर्ण है क्योंकि आपको अपनी ऊँचाई निर्धारित करते समय इसे ध्यान में रखना होगा। ऊँचाई प्राप्त करने के लिए, आप पंक्ति की ऊँचाई को अपने फ़ॉन्ट आकार और पंक्तियों की संख्या से गुणा करें।

हम जोड़ते हैं स्थिति: सापेक्ष संपत्ति क्योंकि हमें फीका प्रभाव जोड़ने के लिए इसकी आवश्यकता है। प्रभाव को पूरा करने के लिए निम्नलिखित सीएसएस जोड़ें:

.कटऑफ-पाठ::पहले {
संतुष्ट: "";
पद: शुद्ध;
ऊंचाई: कैल्क(2ईएम * वर(--ऊंची लाईन));
चौड़ाई: 100%;
तल: 0;
सूचक-events: कोई नहीं;
पृष्ठभूमि: रैखिक ढलान(कोतल, पारदर्शी, सफ़ेद);
}

उपरोक्त सीएसएस प्रत्येक कार्ड में पाठ की अंतिम पंक्ति को धुंधला कर देता है। आप का उपयोग करके एक लुप्तप्राय प्रभाव प्राप्त कर सकते हैं पृष्ठभूमि संपत्ति और एक ढाल। आपको सेट करना होगा सूचक-events को कोई नहीं यह सुनिश्चित करने के लिए कि तत्व चयन योग्य नहीं है।

यहाँ परिणाम है:

इस तकनीक ने पिछले वाले के समान परिणाम प्राप्त किया (साथ ही अंत में धुंधलापन)। लेकिन आपको अन्य प्रकार के लेआउट और डिज़ाइनों का उपयोग करने के लिए अधिक लचीलापन मिलता है।

गतिशील विस्तार और संक्षिप्त करें बटन जोड़ना

विस्तार/संक्षिप्त बटन जोड़ने से कार्ड अधिक यथार्थवादी और इंटरैक्टिव बन जाते हैं। इस प्रतिमान के साथ, आप क्लिक करके सामग्री का विस्तार करते हैं बढ़ाना बटन, जिसके बाद टेक्स्ट बदल जाता है गिर जाना. इसलिए जब आप इसे क्लिक करते हैं तो बटन का पाठ "विस्तार" और "संक्षिप्त करें" के बीच बदल जाता है। इसके अलावा, शेष सामग्री प्रत्येक संबंधित राज्य में प्रदर्शित और छिपी होती है।

आप पहले से ही एक परिभाषित कर चुके हैं इनपुट आपके HTML में तत्व। यह तत्व आपके बटन के रूप में काम करेगा। इस इनपुट को एक बटन में स्टाइल करने के लिए, अपनी स्टाइल शीट में निम्न CSS शामिल करें:

विस्तार-बीटीएन {
उपस्थिति: कोई नहीं;
सीमा: 1पिक्सलठोसकाला;
गद्दी: .5em;
बॉर्डर-त्रिज्या: .25em;
कर्सर: सूचक;
मार्जिन टॉप: 1रेम;
}

जब आप बटन पर होवर करते हैं, तो आप पृष्ठभूमि का रंग बदलना चाहते हैं:

विस्तार-बीटीएन: होवर {
पृष्ठभूमि का रंग: #सीसीसी;
}

अब इनपुट की जाँच होने पर टेक्स्ट को स्विच करने के लिए CSS:

विस्तार-बीटीएन::पहले {
संतुष्ट: "बढ़ाना"
}
विस्तार-बीटीएन: जाँच की::पहले {
संतुष्ट: "गिर जाना"
}

अब जब आप बटन/इनपुट पर क्लिक करते हैं, तो टेक्स्ट जाता है बढ़ाना को गिर जाना. लेकिन अभी सामग्री का विस्तार नहीं होगा। ऐसा करने के लिए जब आप बटन पर क्लिक करते हैं, तो निम्न सीएसएस जोड़ें:

.कटऑफ-पाठ: है (+विस्तार-बीटीएन: जांचा गया) {
ऊंचाई: ऑटो;
}

यह उदाहरण है का उपयोग करता है () सीएसएस चयनकर्ता तत्व को लक्षित करने के लिए. इस कोड के साथ, आप कह रहे हैं कि यदि कटऑफ़ टेक्स्ट क्षेत्र में चेक किए गए विस्तार बटन हैं, तो कार्ड की ऊंचाई होनी चाहिए ऑटो (जो इसका विस्तार करता है)।

यहाँ परिणाम है:

सीखने के लिए अन्य सीएसएस टिप्स और ट्रिक्स

इस आलेख ने सीएसएस का उपयोग करके बॉक्स में लाइनों की संख्या को सीमित करने के लिए दो अलग-अलग तरीकों का प्रदर्शन किया। हमने जावास्क्रिप्ट की एक भी पंक्ति लिखे बिना सामग्री को विस्तृत/संक्षिप्त करने के लिए एक बटन भी जोड़ा है।

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