टेलविंड में टेक्स्ट को विशिष्ट संख्या में पंक्तियों में कैसे बांधें

यह आलेख टेलविंड में टेक्स्ट को क्लैंप करने की प्रक्रिया प्रदान करेगा।

टेक्स्ट को पंक्तियों की एक विशिष्ट संख्या में कैसे जकड़ें?

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

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

नीचे दिया गया सिंटैक्स 'में प्रदान किया गया है कक्षा 'लाइन क्लैम्पिंग लागू करने के लिए एक तत्व की विशेषता:

उपरोक्त परिभाषित सिंटैक्स में, उपयोगकर्ता 'से संख्याओं का उपयोग कर सकता है' 1 से 6 'डिफ़ॉल्ट लाइन-क्लैम्पिंग कक्षाओं का उपयोग करने के लिए। उदाहरण के लिए, ' लाइन-क्लैंप-1 'वर्ग पाठ्य सामग्री को एक पंक्ति से अधिक नहीं होने देगा।

आइए कुछ उदाहरणों के माध्यम से 'लाइन-कैंप' वर्ग की अवधारणा को समझें।

उदाहरण 1: सामग्री को पंक्तियों की एक विशिष्ट संख्या तक सीमित करने के लिए लाइन क्लैंप क्लास का उपयोग करें

आइए टेलविंड में लाइन-क्लैम्पिंग क्लास का उपयोग करके पाठ सामग्री को तीन पंक्तियों तक सीमित करें जैसा कि नीचे दिया गया है:

उपरोक्त कोड की व्याख्या इस प्रकार है:

• ए ' डिव 'तत्व' का उपयोग करके गोल कोनों के साथ बनाया गया है गोलाकार-एल.जी ' कक्षा। यह 'का उपयोग करके मार्जिन और पैडिंग प्रदान करता है एम-{संख्या} ' और ' पी-{संख्या} “कक्षाएँ।
• अगला, div तत्व में तत्व 'का उपयोग करके केंद्रित है औचित्य-केंद्र 'वर्ग, और' मोड़ना क्लास एक कंटेनर बनाता है जिसमें div का चाइल्ड तत्व शामिल होगा।
• “ बीजी-{रंग}-{संख्या} क्लास div तत्व का पृष्ठभूमि रंग सेट करता है।
• ए ' <पी> टैग टेक्स्ट सामग्री से युक्त बनाया गया है। इसका उपयोग करके निश्चित चौड़ाई प्रदान की जाती है ' w-{संख्या} ' कक्षा।
• अंत में, 'की पाठ्य सामग्री पी 'तत्व' का उपयोग करके तीन पंक्तियों तक सीमित है लाइन-क्लैंप-3 ' कक्षा।

उत्पादन

आउटपुट में यह देखा जा सकता है कि तीन पंक्तियों की निर्दिष्ट सीमा से अधिक की पाठ्य सामग्री छिपी हुई है:

उदाहरण 2: टेलविंड में डिफ़ॉल्ट स्थिति के साथ लाइन क्लैंप क्लास का उपयोग करें

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

टेलविंड में एक स्थिति के साथ 'लाइन-क्लैंप' वर्ग का उपयोग करने का सिंटैक्स नीचे दिया गया है:

तीन डिफ़ॉल्ट स्थितियाँ हैं जिनका वर्णन इस प्रकार है:

• मंडराना: यह किसी तत्व की वह स्थिति है जब उपयोगकर्ता उस पर माउस कर्सर घुमाता है।
• केंद्र: यह वह अवस्था है जब तत्व फोकस में होता है। उदाहरण के लिए, उपयोगकर्ता 'टैब' कुंजी दबाकर तत्व पर नेविगेट करता है।
• सक्रिय: वह स्थिति जब तत्व उपयोगकर्ता द्वारा सक्रिय किया जाता है।

नीचे दिए गए प्रदर्शन में, सब कुछ पिछले उदाहरण के समान है। अंतर केवल इतना है कि लाइन-क्लैम्पिंग क्लास को ' मंडराना ' राज्य:

ध्यान दें कि ' <पी> 'वर्ग' द्वारा प्रदान किया जाता है होवर: लाइन-क्लैंप-3 'वर्ग, जो जब भी उपयोगकर्ता सामग्री बॉक्स पर माउस कर्सर घुमाएगा तो पाठ्य सामग्री को तीन पंक्तियों तक सीमित कर देगा।

उत्पादन

नीचे दिए गए आउटपुट में देखा जा सकता है कि जब माउस कर्सर ब्लॉक पर घूमता है तो लाइन क्लैंपिंग प्रॉपर्टी लागू होती है:

उदाहरण 3: ब्रेकप्वाइंट के साथ लाइन क्लैंप क्लास का उपयोग करें

ब्रेकप्वाइंट टेलविंड में मीडिया क्वेरी हैं जो उपयोगकर्ताओं को एक प्रतिक्रियाशील डिज़ाइन लेआउट बनाने में मदद करते हैं। टेलविंड पूर्वनिर्धारित न्यूनतम चौड़ाई के साथ पांच डिफ़ॉल्ट ब्रेकप्वाइंट प्रदान करता है। डेवलपर इन ब्रेकप्वाइंट के साथ लाइन क्लैंपिंग क्लास का भी उपयोग कर सकता है।

ब्रेकप्वाइंट के साथ लाइन-क्लैम्पिंग क्लास का उपयोग करने का सिंटैक्स इस प्रकार है:

उपरोक्त सिंटैक्स में उल्लिखित 'ब्रेकपॉइंट उपसर्ग' इस प्रकार हैं:

• एसएम: इस ब्रेकप्वाइंट की न्यूनतम चौड़ाई 640px है।
• एमडी: इस ब्रेकप्वाइंट की न्यूनतम चौड़ाई 768px है।
• एलजी: इस ब्रेकप्वाइंट की न्यूनतम चौड़ाई 1024px है।
• एक्सएल: इस ब्रेकप्वाइंट की न्यूनतम चौड़ाई 1280px है।
• 2xl: इस ब्रेकप्वाइंट की न्यूनतम चौड़ाई 1536px है।

नीचे दिए गए प्रदर्शन में, ' पी 'तत्व को अलग-अलग ब्रेकप्वाइंट पर अलग-अलग लाइन-क्लैंप कक्षाओं के साथ प्रदान किया जाता है। जब भी नया ब्रेकप्वाइंट पहुंचेगा तो यह टेक्स्ट ब्लॉक की लाइन-क्लैम्पिंग प्रॉपर्टी को बदल देगा:

पी तत्व को डिफ़ॉल्ट रूप से 'लाइन-क्लैंप-1' वर्ग प्रदान किया जाता है। हालाँकि, 'पी' तत्व में पाठ सामग्री 'के लिए एक पंक्ति तक सीमित होगी' एस.एम 'ब्रेकप्वाइंट, ' के लिए दो पंक्तियाँ एमडी 'ब्रेकप्वाइंट, और' के लिए तीन पंक्तियाँ एलजी “ब्रेकप्वाइंट.

उत्पादन

आउटपुट से, यह स्पष्ट है कि स्क्रीन आकार बदलते ही टेक्स्ट ब्लॉक की लाइन-क्लैंप संपत्ति बदल जाती है:

हमने टेलविंड में टेक्स्ट को विशिष्ट संख्या में लाइनों में क्लैंप करने की प्रक्रिया का प्रदर्शन किया है।

निष्कर्ष

टेलविंड में लाइन क्लैंप क्लास किसी तत्व की पाठ्य सामग्री को लाइनों की निर्दिष्ट संख्या तक सीमित करता है। 'लिन-क्लैंप-{नंबर}' वर्ग का उपयोग टेक्स्ट को सीमित पंक्तियों में क्लैंप करने के लिए सिंटैक्स के रूप में किया जाता है। लाइन क्लैंप क्लास का उपयोग टेलविंड में पूर्व-परिभाषित ब्रेकप्वाइंट और स्टेट वेरिएंट के साथ किया जा सकता है। इस आलेख में पाठ को पंक्तियों की एक निर्दिष्ट संख्या में बांधने की प्रक्रिया प्रदान की गई है।