सीएसएस का उपयोग करते हुए एक पंक्ति के अंत में एक दीर्घवृत्त। इलिप्सिस सीएसएस इलिप्सिस को जोड़कर एकल या बहु-पंक्ति पाठ को ऊंचाई के अनुसार ट्रिम करना

व्लाद मर्ज़ेविच

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

वास्तव में, यह सब छुपे हुए मूल्य के साथ अतिप्रवाह संपत्ति का उपयोग करने के लिए आता है। अंतर केवल हमारे पाठ के अलग-अलग प्रदर्शन में हैं।

अतिप्रवाह का उपयोग करना

ओवरफ़्लो प्रॉपर्टी को टेक्स्ट के साथ उसकी पूरी महिमा में दिखाने के लिए, आपको nowrap मान के साथ व्हाइट-स्पेस का उपयोग करके टेक्स्ट को खोलना होगा। यदि ऐसा नहीं किया जाता है, तो हमें जिस प्रभाव की आवश्यकता है वह घटित नहीं होगा; पाठ में हाइफ़न जोड़ दिया जाएगा और संपूर्ण पाठ प्रदर्शित हो जाएगा। उदाहरण 1 दिखाता है कि शैली गुणों के निर्दिष्ट सेट के साथ लंबे टेक्स्ट को कैसे ट्रिम किया जाए।

उदाहरण 1. पाठ के लिए अतिप्रवाह

HTML5 CSS3 IE Cr Op Sa Fx

टेक्स्ट .आकार (व्हाइट-स्पेस: अब्रैप; /* टेक्स्ट रैपिंग रद्द करें */ ओवरफ्लो: छिपा हुआ; /* क्रॉप कंटेंट */ बैकग्राउंड: #fc0; /* बैकग्राउंड कलर */ पैडिंग: 5px; /* मार्जिन्स */ )

इस उदाहरण का परिणाम चित्र में दिखाया गया है। 1.

चावल। 1. अतिप्रवाह गुण को लागू करने के बाद पाठ की उपस्थिति

जैसा कि चित्र से देखा जा सकता है, आम तौर पर एक खामी है - यह स्पष्ट नहीं है कि पाठ में निरंतरता है, इसलिए उपयोगकर्ता को इसके बारे में अवगत कराया जाना चाहिए। यह आमतौर पर ग्रेडिएंट या इलिप्सिस का उपयोग करके किया जाता है।

टेक्स्ट में ग्रेडिएंट जोड़ना

यह स्पष्ट करने के लिए कि दाईं ओर का पाठ समाप्त नहीं होता है, आप उसके ऊपर पारदर्शी रंग से लेकर पृष्ठभूमि रंग तक एक ग्रेडिएंट को ओवरले कर सकते हैं (चित्र 2)। इससे पाठ के क्रमिक विघटन का प्रभाव पैदा होगा।

चावल। 2. क्रमिक पाठ

उदाहरण 2 दिखाता है कि यह प्रभाव कैसे बनाया जाए। तत्व की शैली व्यावहारिक रूप से वही रहेगी, लेकिन हम छद्म-तत्व और CSS3 के बाद :: का उपयोग करके ग्रेडिएंट को स्वयं जोड़ देंगे। ऐसा करने के लिए, हम सामग्री प्रॉपर्टी के माध्यम से एक खाली छद्म तत्व डालते हैं और प्रमुख ब्राउज़रों के लिए विभिन्न उपसर्गों के साथ इसमें एक ग्रेडिएंट लागू करते हैं (उदाहरण 2)। ग्रेडिएंट की चौड़ाई को width का उपयोग करके आसानी से बदला जा सकता है, आप मान 0.2 को अपने मान से प्रतिस्थापित करके पारदर्शिता की डिग्री को भी समायोजित कर सकते हैं।

उदाहरण 2: पाठ पर ग्रेडिएंट

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

टेक्स्ट आकार (व्हाइट-स्पेस: अब्रैप; /* टेक्स्ट रैपिंग रद्द करें */ ओवरफ्लो: छिपा हुआ; /* क्रॉप कंटेंट */ पैडिंग: 5px; /* मार्जिन */ बैकग्राउंड: #fc0; /* बैकग्राउंड कलर */ पोजीशन: रिलेटिव ; /* सापेक्ष स्थिति */ ) .आकार::बाद (सामग्री: ""; /* तत्व प्रदर्शित करें */ स्थिति: निरपेक्ष; /* निरपेक्ष स्थिति */ दाएँ: 0; शीर्ष: 0; /* तत्व की स्थिति */ चौड़ाई: 40px; /* ग्रेडिएंट चौड़ाई */ ऊंचाई: 100%; /* पैरेंट ऊंचाई */ /* ग्रेडिएंट */ बैकग्राउंड: -मोज़-लीनियर-ग्रेडिएंट(बाएं, आरजीबीए(255,204,0, 0.2), #एफसी0 100%) ; पृष्ठभूमि: -वेबकिट-लीनियर-ग्रेडिएंट(बाएं, आरजीबीए(255,204,0, 0.2), #एफसी0 100%); पृष्ठभूमि: -ओ-लीनियर-ग्रेडिएंट(बाएं, आरजीबीए(255,204,0, 0.2), #एफसी0 100%); पृष्ठभूमि: -एमएस-रैखिक-ग्रेडिएंट(बाएं, आरजीबीए(255,204,0, 0.2), #एफसी0 100%); पृष्ठभूमि: रैखिक-ग्रेडिएंट(दाईं ओर, आरजीबीए(255,204,0, 0.2), #fc0 100%)

एक इंट्रा-डिस्क्रीट आर्पेगियो एक पॉलीसीरीज को बदल देता है, यह एक सुपर पॉलीफोनिक फैब्रिक में एक बार का वर्टिकल है।

में यह तरीका काम नहीं करता इंटरनेट ब्राउज़रएक्सप्लोरर संस्करण 8.0 तक सम्मिलित है, क्योंकि यह ग्रेडिएंट का समर्थन नहीं करता है। लेकिन आप CSS3 को छोड़ सकते हैं और PNG-24 प्रारूप में एक छवि के माध्यम से पुराने तरीके से एक ग्रेडिएंट बना सकते हैं।

इस विधि को केवल इसके साथ जोड़ा जा सकता है सादा पृष्ठभूमिऔर पृष्ठभूमि छवि के मामले में, पाठ के शीर्ष पर ग्रेडिएंट ध्यान देने योग्य होगा।

पाठ के अंत में दीर्घवृत्त

आप ग्रेडिएंट के बजाय क्रॉप किए गए टेक्स्ट के अंत में इलिप्सिस का भी उपयोग कर सकते हैं। इसके अलावा, इसे टेक्स्ट-ओवरफ़्लो प्रॉपर्टी का उपयोग करके स्वचालित रूप से जोड़ा जाएगा। इसे IE के पुराने संस्करणों सहित सभी ब्राउज़रों द्वारा समझा जाता है, और इस संपत्ति का एकमात्र दोष यह है कि इसकी स्थिति वर्तमान में अस्पष्ट है। ऐसा लगता है कि CSS3 में यह प्रॉपर्टी शामिल है, लेकिन इसके साथ मौजूद कोड सत्यापन पास नहीं करता है।

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

उदाहरण 3: टेक्स्ट-ओवरफ़्लो का उपयोग करना

HTML5 CSS3 IE Cr Op Sa Fx

टेक्स्ट .आकार (व्हाइट-स्पेस: अब्रैप; /* टेक्स्ट रैपिंग रद्द करें */ ओवरफ्लो: छिपा हुआ; /* क्रॉप सामग्री */ पैडिंग: 5पीएक्स; /* मार्जिन */ टेक्स्ट-ओवरफ्लो: इलिप्सिस; /* एलिप्सिस */ ) .साइज :होवर (पृष्ठभूमि: #f0f0f0; /* पृष्ठभूमि का रंग */ सफेद-स्थान: सामान्य; /* सामान्य पाठ रैपिंग */ ) अचेतन विरोधाभास का कारण बनता है, इसे ली रॉस द्वारा एक मौलिक एट्रिब्यूशन त्रुटि के रूप में पहचाना जाता है, जिसे इसमें देखा जा सकता है कई प्रयोग.

इस उदाहरण का परिणाम चित्र में दिखाया गया है। 3.

चावल। 3. दीर्घवृत्त के साथ पाठ

इन विधियों का बड़ा लाभ यह है कि यदि पाठ छोटा है और किसी दिए गए क्षेत्र में पूरी तरह से फिट बैठता है तो ग्रेडिएंट और दीर्घवृत्त प्रदर्शित नहीं होते हैं। इसलिए जब टेक्स्ट स्क्रीन पर पूरी तरह से दिखाई देगा तो वह हमेशा की तरह प्रदर्शित होगा और तत्व की चौड़ाई कम होने पर कट जाएगा।

कई लोगों को शायद इस समस्या का सामना करना पड़ा होगा जब कुछ पाठ को एक पंक्ति में प्रदर्शित करने की आवश्यकता होती है। इसके अलावा, पाठ काफी लंबा हो सकता है, और जिस ब्लॉक में यह पाठ स्थित है उसकी चौड़ाई आमतौर पर ब्राउज़र विंडो के कम से कम समान आकार तक सीमित होती है। इन मामलों के लिए, टेक्स्ट-ओवरफ़्लो प्रॉपर्टी का आविष्कार किया गया था, जिसे CSS3 अनुशंसा में शामिल किया गया था, और बहुत समय पहले पहली बार IE6 में लागू किया गया था। किसी ब्लॉक के लिए इस प्रॉपर्टी का उपयोग करते समय, यदि इसका टेक्स्ट ब्लॉक से अधिक चौड़ा है, तो टेक्स्ट काट दिया जाता है और अंत में एक इलिप्सिस रख दिया जाता है। हालाँकि यहाँ सब कुछ इतना सरल नहीं है, हम थोड़ी देर बाद इस पर लौटेंगे।
इंटरनेट एक्सप्लोरर के साथ सब कुछ स्पष्ट है, अन्य ब्राउज़रों के बारे में क्या? और यद्यपि टेक्स्ट-ओवरफ़्लो संपत्ति को वर्तमान में CSS3 विनिर्देश से बाहर रखा गया है, सफारी इसका समर्थन करती है (कम से कम संस्करण 3 में), ओपेरा भी (संस्करण 9 संस्करण के बाद से, हालांकि संपत्ति है) -ओ-ओवरफ़्लो-टेक्स्ट कहा जाता है) लेकिन फ़ायरफ़ॉक्स इसका समर्थन नहीं करता है, और संस्करण 3 में भी यह नहीं होगा, यह दुखद है, लेकिन सच है लेकिन शायद कुछ किया जा सकता है?

निःसंदेह, यह किया जा सकता है। जब मैं इंटरनेट पर इस संपत्ति के बारे में और फ़ायरफ़ॉक्स में इसे कैसे किया जाए, इसके बारे में खोज रहा था, तो मुझे यह जानकारी मिली सरल उपाय. समाधान का सार:

बस इतना ही। विवरण के लिए लेख पढ़ें.
समाधान बुरा नहीं है, लेकिन समस्याएँ हैं:

पाठ को पत्र के बीच में (अपेक्षाकृत बोलते हुए) काटा जा सकता है, और हम उसका "स्टंप" देखेंगे।

इलिप्सिस हमेशा प्रदर्शित होता है, भले ही पाठ ब्लॉक की चौड़ाई से छोटा हो (अर्थात, यह इससे बाहर नहीं गिरता है और इलिप्सिस की आवश्यकता नहीं है)।

पहला कदम

आइए पहले दूसरी समस्या पर ध्यान केंद्रित करें, अर्थात् जब जरूरत न हो तो इलिप्सिस प्रदर्शित करने से कैसे बचें। अपने दिमाग पर जोर डालने और "थोड़ा सा" प्रयोग करने के बाद, मुझे एक समाधान मिला। मैं समझाने की कोशिश करूंगा.
मुद्दा यह है कि हमें इलिप्सिस के साथ एक अलग ब्लॉक की आवश्यकता है जो केवल तब दिखाई देगा जब पाठ चौड़ाई में बहुत अधिक जगह लेगा। तभी मेरे मन में एक गिरते हुए तैरते ब्लॉक का विचार आया। हालाँकि यह डरावना लगता है, इसका मतलब सिर्फ एक ब्लॉक है जो हमेशा वहाँ रहता है और दाईं ओर दबाया जाता है, लेकिन जब टेक्स्ट की चौड़ाई बड़ी हो जाती है, तो टेक्स्ट ब्लॉक को अगली पंक्ति में धकेल देता है।
आइए अभ्यास की ओर आगे बढ़ें, अन्यथा इसे समझाना कठिन है। आइए सेट करें HTML संरचना:

बहुत लंबा पाठ
बहुत संक्षिप्त नहीं, लेकिन मैं इससे छोटा कुछ भी नहीं कर सका। तो, हमारे पास एक कंटेनर ब्लॉक DIV.ellipsis है, हमारे टेक्स्ट वाला एक ब्लॉक और दूसरा ब्लॉक जिसमें एलिप्सिस होगा। ध्यान दें कि "एलिप्सिस ब्लॉक" वास्तव में खाली है, क्योंकि जब हम पाठ की प्रतिलिपि बनाते हैं तो हमें अतिरिक्त तीन बिंदुओं की आवश्यकता नहीं होती है। इसके अलावा, अतिरिक्त कक्षाओं की कमी से डरो मत, क्योंकि इस संरचना को अच्छी तरह से संबोधित किया गया है सीएसएस चयनकर्ता. और यहाँ सीएसएस ही है:
.एलिप्सिस (ओवरफ्लो: छिपा हुआ; व्हाइट-स्पेस: अब्रैप; लाइन-ऊंचाई: 1.2em; ऊंचाई: 1.2em; बॉर्डर: 1px सॉलिड रेड; ) .ellipsis > DIV:फर्स्ट-चाइल्ड (फ्लोट: लेफ्ट; ) .ellipsis > DIV + DIV (फ्लोट: दाएं; मार्जिन-टॉप: -1.2em; ).एलिप्सिस >
बस इतना ही। हम जांच करते हैं और सुनिश्चित करते हैं कि यह फ़ायरफ़ॉक्स, ओपेरा, सफारी में इरादे के अनुसार काम करता है। IE में एक बहुत ही अजीब, लेकिन पूर्वानुमानित परिणाम है। IE6 में सब कुछ ख़त्म हो गया है, लेकिन IE7 में यह बिल्कुल काम नहीं करता है, क्योंकि यह जेनरेट की गई सामग्री का समर्थन नहीं करता है। लेकिन हम बाद में IE पर वापस आएंगे।

अभी के लिए, आइए देखें कि हमने क्या किया है। सबसे पहले, हम मुख्य ब्लॉक की लाइन-ऊंचाई और ऊंचाई निर्धारित करते हैं, क्योंकि हमें ब्लॉक की ऊंचाई और टेक्स्ट लाइन की ऊंचाई जानने की आवश्यकता होती है। हम इलिप्सिस वाले ब्लॉक के मार्जिन-टॉप के लिए समान मान सेट करते हैं, लेकिन साथ में नकारात्मक मूल्य. इस प्रकार, जब ब्लॉक को अगली पंक्ति में "रीसेट" नहीं किया जाता है, तो यह टेक्स्ट लाइन (एक पंक्ति) से ऊपर होगा, जब इसे रीसेट किया जाता है, तो यह अपने स्तर पर होगा (वास्तव में, यह निचला है, हम बस इसे खींचते हैं) एक पंक्ति ऊपर)। अनावश्यक चीजों को छिपाने के लिए, खासकर जब इलिप्सिस को दिखाने की कोई आवश्यकता नहीं है, हम मुख्य ब्लॉक के लिए ओवरफ़्लो: छिपा हुआ बनाते हैं, इसलिए जब इलिप्सिस रेखा से ऊपर होता है, तो इसे नहीं दिखाया जाएगा। यह हमें ब्लॉक के बाहर (दाएं किनारे पर) आने वाले टेक्स्ट को हटाने की भी अनुमति देता है। पाठ को अप्रत्याशित रूप से लपेटने और इलिप्सिस के साथ ब्लॉक को नीचे और नीचे धकेलने से रोकने के लिए, हम व्हाइट-स्पेस बनाते हैं: अब्रैप, जिससे हाइफ़न पर रोक लगती है - हमारा पाठ हमेशा एक पंक्ति पर रहेगा। टेक्स्ट वाले ब्लॉक के लिए, हम फ्लोट: लेफ्ट सेट करते हैं ताकि यह इलिप्सिस के साथ ब्लॉक को तुरंत ढह न जाए और न्यूनतम चौड़ाई न ले ले। चूंकि मुख्य ब्लॉक (DIV.ellipsis) के अंदर दोनों ब्लॉक तैर रहे हैं (फ्लोट: बाएं/दाएं), टेक्स्ट ब्लॉक खाली होने पर मुख्य ब्लॉक ढह जाएगा, इसलिए मुख्य ब्लॉक के लिए हम एक निश्चित ऊंचाई (ऊंचाई: 1.2em) निर्धारित करते हैं . और अंत में, हम दीर्घवृत्त प्रदर्शित करने के लिए ::after छद्म तत्व का उपयोग करते हैं। इस छद्म तत्व के लिए हम उस पाठ को कवर करने के लिए एक पृष्ठभूमि भी निर्धारित करते हैं जो इसके अंतर्गत दिखाई देगा। हमने ब्लॉक के आयाम देखने के लिए मुख्य ब्लॉक के लिए एक फ्रेम सेट किया है, बाद में हम इसे हटा देंगे।
यदि फ़ायरफ़ॉक्स छद्म-तत्वों के साथ-साथ ओपेरा और सफ़ारी को उनकी स्थिति (उनके लिए स्थिति/फ़्लोट आदि सेट करना) के संदर्भ में समर्थन करता है, तो एलिप्सिस के लिए एक अलग ब्लॉक का उपयोग नहीं करना संभव होगा। अंतिम 3 नियमों को निम्नलिखित से बदलने का प्रयास करें:

.ellipsis > DIV:first-child::after (फ्लोट: दाएं; सामग्री: "..."; मार्जिन-टॉप: -1.2em; पृष्ठभूमि-रंग: सफेद; स्थिति: सापेक्ष; )
ओपेरा और सफारी में, सब कुछ पहले की तरह और अतिरिक्त इलिप्सिस ब्लॉक के बिना काम करता है। लेकिन फ़ायरफ़ॉक्स निराशाजनक है. लेकिन यह उसके लिए है कि हम निर्णय लें। खैर, आपको चरण दो की मूल HTML संरचना से काम चलाना होगा

जैसा कि आपने देखा होगा, जब टेक्स्ट किसी ब्लॉक में फिट होता है तो हमें इलिप्सिस दिखने की समस्या से छुटकारा मिल गया है। हालाँकि, हमारे पास अभी भी एक और समस्या है - पाठ अक्षरों के बीच में कटा हुआ है। और इसके अलावा, यह IE में काम नहीं करता है। दोनों पर काबू पाने के लिए, आपको ब्राउज़र के लिए मूल टेक्स्ट-ओवरफ़्लो नियम का उपयोग करने की आवश्यकता है, और केवल फ़ायरफ़ॉक्स के लिए ऊपर वर्णित समाधान का उपयोग करें (कोई विकल्प नहीं है)। हम बाद में पता लगाएंगे कि "केवल फ़ायरफ़ॉक्स के लिए" समाधान कैसे बनाया जाए, लेकिन अब टेक्स्ट-ओवरफ़्लो का उपयोग करके हमारे पास जो काम है उसे बनाने का प्रयास करें। आइए सीएसएस में बदलाव करें:

.एलिप्सिस (ओवरफ्लो: छिपा हुआ; व्हाइट-स्पेस: नॉरैप; लाइन-ऊंचाई: 1.2एम; ऊंचाई: 1.2एम; बॉर्डर: 1पीएक्स ठोस लाल; टेक्स्ट-ओवरफ्लो: इलिप्सिस; -ओ-टेक्स्ट-ओवरफ्लो: इलिप्सिस; चौड़ाई: 100% ; DIV + DIV::बाद में (पृष्ठभूमि-रंग: सफ़ेद; सामग्री: "..."; ) */
जैसा कि बाद में पता चला, संपादित करने के लिए बहुत कुछ नहीं है। मुख्य ब्लॉक शैली में तीन पंक्तियाँ जोड़ी गई हैं। उनमें से दो में टेक्स्ट-ओवरफ़्लो शामिल है। IE के लिए चौड़ाई को 100% पर सेट करना आवश्यक है ताकि टेक्स्ट ब्लॉक को अनंत तक विस्तारित न करे, और टेक्स्ट-ओवरफ़्लो प्रॉपर्टी काम करे; मूलतः हमने चौड़ाई सीमित कर दी है। सिद्धांत रूप में, DIV, सभी ब्लॉक तत्वों की तरह, कंटेनर की पूरी चौड़ाई में फैला होता है, और चौड़ाई: 100% बेकार है, और हानिकारक भी है, लेकिन IE में लेआउट की समस्या है, क्योंकि कंटेनर हमेशा सामग्री को फिट करने के लिए फैलता है, इसलिए और कोई रास्ता नहीं। हमने सभी आंतरिक तत्वों को भी इनलाइन बना दिया है, क्योंकि कुछ ब्राउज़रों (सफ़ारी और ओपेरा) के लिए टेक्स्ट-ओवरफ़्लो अन्यथा काम नहीं करेगा, क्योंकि अंदर ब्लॉक तत्व हैं। हमने पिछले तीन नियमों पर टिप्पणी की है, क्योंकि इस मामले में उनकी आवश्यकता नहीं है और वे सब कुछ (संघर्ष) तोड़ देते हैं। ये नियम केवल फ़ायरफ़ॉक्स के लिए आवश्यक होंगे।
आइए देखें कि हमें क्या मिला और जारी रखें।
तीसरा कदम

जब मैंने एक बार फिर उस पृष्ठ को देखा (इससे पहले कि मैं यह लेख लिखने जा रहा था) जिसका उल्लेख बिल्कुल शुरुआत में किया गया था, तब, जिज्ञासावश, मैंने स्मार्ट से संबंधित विचारों के लिए टिप्पणियों पर नज़र डाली। और मुझे यह एक टिप्पणी में मिला जिसमें एक अन्य समाधान के बारे में बात की गई थी जो फ़ायरफ़ॉक्स और IE में काम करता है (इस व्यक्ति के लिए, पहले लेख के लेखक के लिए, जाहिर तौर पर कोई अन्य ब्राउज़र नहीं हैं)। इसलिए, इस समाधान में, लेखक इस घटना (टेक्स्ट-ओवरफ़्लो की अनुपस्थिति) से थोड़ा अलग तरीके से निपटता है, ओवरफ़्लो और अंडरफ़्लो घटनाओं के लिए हैंडलर को उन तत्वों से जोड़ता है जिनके लिए यदि आवश्यक हो तो इलिप्सिस लगाना आवश्यक था। बुरा नहीं है, लेकिन मुझे ऐसा लगता है कि यह समाधान बहुत महंगा है (संसाधनों के संदर्भ में), खासकर जब से यह कुछ हद तक गड़बड़ है। हालाँकि, यह पता लगाने के दौरान कि उन्होंने इसे कैसे हासिल किया, उन्हें एक दिलचस्प चीज़ का पता चला, जिसका नाम था CSS प्रॉपर्टी -मोज़-बाइंडिंग। जहां तक मैं समझता हूं, यह IE में व्यवहार का एक एनालॉग है, केवल एक अलग सॉस और कूलर के साथ। लेकिन हम विवरण में नहीं जाएंगे, मान लीजिए कि इस तरह से आप एक जावास्क्रिप्ट हैंडलर को एक तत्व से जोड़ सकते हैं सीएसएस का उपयोग करना. यह अजीब लगता है, लेकिन यह काम करता है। हम क्या कर रहे हैं:

.एलिप्सिस (ओवरफ्लो: छिपा हुआ; व्हाइट-स्पेस: नॉरैप; लाइन-ऊंचाई: 1.2एम; ऊंचाई: 1.2एम; बॉर्डर: 1पीएक्स ठोस लाल; टेक्स्ट-ओवरफ्लो: इलिप्सिस; -ओ-टेक्स्ट-ओवरफ्लो: इलिप्सिस; चौड़ाई: 100% ; -moz-बाइंडिंग: url(moz_fix.xml#ellipsis); -एलिप्सिस > DIV + DIV (फ्लोट: दाएं; मार्जिन-टॉप: -1.2em; डिस्प्ले: ब्लॉक; ) .moz-ellipsis > DIV + DIV::after (पृष्ठभूमि-रंग: सफेद; सामग्री: "..." ; )
जैसा कि आप देख सकते हैं, हमने फिर से बहुत अधिक बदलाव नहीं किए हैं। IE7 में इस चरण में एक अजीब गड़बड़ी है, यदि आप मुख्य ब्लॉक (सबसे सरल विकल्प) के लिए ज़ूम: 1 सेट नहीं करते हैं तो सब कुछ तिरछा हो जाता है। यदि आप नियम .ellipsis * या .moz-ellipsis > DIV + DIV (जो IE7 को बिल्कुल भी प्रभावित नहीं करता है) को हटाते हैं (हटाते हैं, टिप्पणी करते हैं), तो गड़बड़ी गायब हो जाती है। यह सब अजीब है, अगर किसी को पता है कि क्या गलत है तो मुझे बताएं। अभी के लिए, हम ज़ूम: 1 से काम चलाएंगे और फ़ायरफ़ॉक्स पर आगे बढ़ेंगे।
-मोज़-बाइंडिंग प्रॉपर्टी में पहचानकर्ता इलिप्सिस के साथ एक निर्देश के साथ moz_fix.xml फ़ाइल शामिल है। इसकी सामग्री एक्सएमएल फ़ाइलअगले:

यह कंस्ट्रक्टर केवल उस तत्व में moz-ellipsis क्लास जोड़ता है जिसके लिए चयनकर्ता ने काम किया है। यह केवल फ़ायरफ़ॉक्स (गेको ब्राउज़र?) में काम करेगा, इसलिए इसमें केवल moz-ellipsis वर्ग को तत्वों में जोड़ा जाएगा, और हम इस वर्ग के लिए अतिरिक्त नियम जोड़ सकते हैं। वे यही तो चाहते थे. मैं this.style.mozBinding = "" की आवश्यकता के बारे में पूरी तरह से निश्चित नहीं हूं, लेकिन अभिव्यक्ति के साथ अनुभव से, सुरक्षित पक्ष पर रहना बेहतर है (सामान्य तौर पर, मैं फ़ायरफ़ॉक्स के इस पक्ष से बहुत परिचित नहीं हूं, इसलिए मुझसे गलती हो सकती है)।
आपको इसकी चिंता हो सकती है यह तकनीकएक बाहरी फ़ाइल और सामान्य रूप से जावास्क्रिप्ट का उपयोग किया जाता है। डरने की कोई जरूरत नहीं है. सबसे पहले, यदि फ़ाइल लोड नहीं होती है और/या जावास्क्रिप्ट अक्षम है और काम नहीं करती है, तो कोई बात नहीं, उपयोगकर्ता अंत में दीर्घवृत्त नहीं देख पाएगा, ब्लॉक के अंत में पाठ काट दिया जाएगा। अर्थात्, इस मामले में हमें एक "विनीत" समाधान मिलता है। आप अपने लिए देख सकते है।

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

हम इस मुद्दे को ख़त्म कर सकते हैं, लेकिन हम अपने समाधान में थोड़ा सुधार करना चाहेंगे। चूँकि हम एक कंस्ट्रक्टर को किसी भी ब्लॉक से जोड़ सकते हैं और तदनुसार, उस पर नियंत्रण प्राप्त कर सकते हैं, तो इसका लाभ क्यों न उठाया जाए। आइए अपनी संरचना को सरल बनाएं:

बहुत लंबा पाठ
अरे हां! मुझे लगता है कि आप मुझसे सहमत होंगे - आपको यही चाहिए!
आइए अब स्टाइल से सभी अनावश्यक चीज़ों को हटा दें:
.एलिप्सिस (ओवरफ्लो: छिपा हुआ; व्हाइट-स्पेस: अब्रैप; लाइन-ऊंचाई: 1.2एम; ऊंचाई: 1.2एम; टेक्स्ट-ओवरफ्लो: इलिप्सिस; -ओ-टेक्स्ट-ओवरफ्लो: इलिप्सिस; चौड़ाई: 100%; -मोज़-बाइंडिंग: url(moz_fix.xml#ellipsis); दीर्घवृत्त > DIV + DIV::बाद (पृष्ठभूमि-रंग: सफ़ेद; सामग्री: "..."; )
आख़िरकार हमने लाल फ़्रेम हटा दिया :)
अब, आइए हमारे moz_fix.xml में थोड़ा जोड़ें:

यहाँ क्या चल रहा है? हम अपनी प्रारंभिक HTML संरचना को फिर से बना रहे हैं। यानी, ब्लॉक वाली कठिनाइयाँ स्वचालित रूप से और केवल फ़ायरफ़ॉक्स में ही दूर हो जाती हैं। जावास्क्रिप्ट कोड सर्वोत्तम परंपराओं में लिखा गया है :)
दुर्भाग्य से, हम उस स्थिति से बच नहीं सकते जब पाठ को पत्र के बीच में काट दिया जाता है (हालांकि, शायद अस्थायी रूप से, क्योंकि मेरा समाधान अभी भी बहुत कच्चा है, और यह भविष्य में काम कर सकता है)। लेकिन हम इस प्रभाव को थोड़ा कम कर सकते हैं। ऐसा करने के लिए हमें एक छवि (पारदर्शी ढाल के साथ एक सफेद पृष्ठभूमि), और शैली में कुछ बदलाव की आवश्यकता है:
.moz-ellipsis > DIV:first-child (फ्लोट: बाएँ; मार्जिन-दाएँ: -26px; ) .moz-ellipsis > DIV + DIV (फ्लोट: दाएँ; मार्जिन-टॉप: -1.2em; पृष्ठभूमि: url(ellipsis. पीएनजी) रिपीट-वाई; पैडिंग-लेफ्ट: 26px )
आइए देखें और जीवन का आनंद लें।

आइए इस निष्कर्ष पर विराम लगाएं

मैं आपको तृतीय-पक्ष लेआउट के लिए एक छोटा सा उदाहरण दूंगा। मैंने विकिपीडिया पृष्ठों में से एक (पहला पृष्ठ जो सामने आया) की सामग्री तालिका ली और ऊपर वर्णित विधि को उस पर लागू किया।
सामान्य रूप में यह फैसलाकेवल विस्तार से ही सार्वभौमिक कहा जा सकता है। यह सब आपके लेआउट और उसकी जटिलता पर निर्भर करता है। आपको एक फ़ाइल, या शायद एक टैम्बोरिन की आवश्यकता हो सकती है। हालाँकि ज्यादातर मामलों में, मुझे लगता है कि यह काम करेगा। और फिर, अब आपके पास एक प्रारंभिक बिंदु है;)
मुझे आशा है कि आपने लेख से कुछ दिलचस्प और उपयोगी सीखा है;) सीखें, प्रयोग करें, साझा करें।
आपको कामयाबी मिले!

मनमाने ढंग से लंबाई का पाठ है जिसे निश्चित ऊंचाई और चौड़ाई के ब्लॉक के अंदर प्रदर्शित करने की आवश्यकता है। इस मामले में, यदि पाठ पूरी तरह से फिट नहीं होता है, तो पाठ का एक टुकड़ा जो दिए गए ब्लॉक में पूरी तरह से फिट होता है, प्रदर्शित किया जाना चाहिए, जिसके बाद एक दीर्घवृत्त सेट किया जाता है।

यह कार्य काफी सामान्य है, लेकिन साथ ही यह उतना भी मामूली नहीं है जितना लगता है।

सीएसएस में सिंगल लाइन टेक्स्ट का विकल्प

इस मामले में, आप text-overflow: ellipsis प्रॉपर्टी का उपयोग कर सकते हैं। इस मामले में, कंटेनर में संपत्ति होनी चाहिए अतिप्रवाहबराबर छिपा हुआया क्लिप

ब्लॉक (चौड़ाई: 250px; व्हाइट-स्पेस: अब्रैप; ओवरफ़्लो: छिपा हुआ; टेक्स्ट-ओवरफ़्लो: इलिप्सिस;)

सीएसएस में मल्टीलाइन टेक्स्ट का विकल्प

मल्टीलाइन टेक्स्ट को ट्रिम करने का पहला तरीका है सीएसएस का उपयोग करनागुण छद्म तत्वों को लागू करते हैं :पहलेऔर :बाद. आइए HTML मार्कअप से शुरुआत करें

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

और अब संपत्तियाँ स्वयं

बॉक्स (ओवरफ्लो: छिपा हुआ; ऊंचाई: 200px; चौड़ाई: 300px; लाइन-ऊंचाई: 25px; ) .बॉक्स: पहले (सामग्री: ""; फ्लोट: बाएं; चौड़ाई: 5px; ऊंचाई: 200px; ) .बॉक्स> *: पहला -चाइल्ड (फ्लोट: दाएं; चौड़ाई: 100%; मार्जिन-बाएं: -5पीएक्स; ) .बॉक्स:बाद में (सामग्री: "\02026"; बॉक्स-आकार: सामग्री-बॉक्स; फ्लोट: दाएं; स्थिति: सापेक्ष; शीर्ष: -25पीएक्स; चौड़ाई: 3ईएम; पैडिंग-दाएं: 5पीएक्स; पृष्ठभूमि-आकार: 100% 100% (255, 255, 255, 0), सफेद;

दूसरा तरीका कॉलम-चौड़ाई प्रॉपर्टी का उपयोग करना है, जिसके साथ हम मल्टीलाइन टेक्स्ट के लिए कॉलम चौड़ाई सेट करते हैं। हालाँकि, इस पद्धति का उपयोग करते समय, अंत में दीर्घवृत्त सेट करना संभव नहीं होगा। एचटीएमएल:

ब्लॉक (ओवरफ्लो: छिपा हुआ; ऊँचाई: 200px; चौड़ाई: 300px;)

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

ब्लॉक (ओवरफ़्लो: छिपा हुआ; टेक्स्ट-ओवरफ़्लो: इलिप्सिस; डिस्प्ले: -वेबकिट-बॉक्स; -वेबकिट-लाइन-क्लैंप: 2; -वेबकिट-बॉक्स-ओरिएंट: वर्टिकल;)

जावास्क्रिप्ट में मल्टीलाइन टेक्स्ट का विकल्प

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

var ब्लॉक = दस्तावेज़. querySelector('ब्लॉक'), टेक्स्ट = ब्लॉक. आंतरिक HTML, क्लोन = document. createElement('div'); क्लोन शैली। स्थिति = "पूर्ण" ; क्लोन शैली। दृश्यता = "छिपा हुआ"; क्लोन शैली। चौड़ाई = ब्लॉक. क्लाइंटविड्थ + "पीएक्स" ; क्लोन आंतरिक HTML = पाठ; दस्तावेज़। शरीर। एपेंडचाइल्ड(क्लोन); वर एल = पाठ। लंबाई - 1 ; for (; l >= 0 && क्लोन . clientHeight > ब्लॉक . clientHeight ; -- l ) ( क्लोन . इनरHTML = टेक्स्ट . सबस्ट्रिंग ( 0 , l ) + "..." ; ) ब्लॉक । आंतरिक HTML = क्लोन। आंतरिक HTML ;

यह jQuery के लिए प्लगइन के समान है:

(फ़ंक्शन ($ ) ( var ट्रंकेट = फ़ंक्शन (el ) ( var text = el . text (), ऊँचाई = el . ऊँचाई (), क्लोन = el . क्लोन (); क्लोन . CSS (( स्थिति : "पूर्ण" , दृश्यता: "छिपा हुआ", ऊंचाई: "ऑटो" )); (क्लोन। टेक्स्ट (टेक्स्ट। सबस्ट्रिंग (0, एल) + "..."); एल। टेक्स्ट (क्लोन। हटाएं ()); (इसे वापस करें। प्रत्येक (फ़ंक्शन() ( ट्रंकेट ($ (यह )); )); ( jQuery ));

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

कभी-कभी वेबसाइट बनाने की प्रक्रिया में हमें गतिशील पाठ के कुछ भाग को बिना देखे छिपाने की आवश्यकता होती है अगली पंक्ति. यानी एक निश्चित चौड़ाई वाली तालिका में लंबा टेक्स्ट डालें। साथ ही, उपयोगकर्ता को यह दिखाना आवश्यक है कि पाठ का दृश्य भाग ही सब कुछ नहीं है। एक छिपा हुआ हिस्सा भी है. इसे दीर्घवृत्त (...) का उपयोग करके दिखाया जा सकता है।

CSS3 का उपयोग करके हम इसे आसानी से पूरा कर सकते हैं सीएसएस संपत्तिपाठ-अतिप्रवाह

अंकन

पाठ-अतिप्रवाह: दीर्घवृत्त;

अर्थ अंडाकारआपको पाठ के बाद एक दीर्घवृत्त जोड़ने की अनुमति देता है (...)

टेक्स्ट-ओवरफ़्लो: एलिप्सिस गुण तब उपयोगी होता है जब:

1. टेक्स्ट सेल से परे फैलता है
2. सेल में खाली जगह होती है: अब्रैप।

डेटाबेस से कंपनियों के नाम प्रदर्शित करने के लिए हमारे पास 150 पिक्सेल की चौड़ाई वाला एक div है। लेकिन साथ ही, हम नहीं चाहते कि लंबी कंपनी के नाम एक नई लाइन में चले जाएं और खराब हो जाएं उपस्थितिटेबल. यानी, हमें 150 पिक्सल से अधिक फैले टेक्स्ट को छिपाने की जरूरत है। हम यूजर को भी इसकी जानकारी देना चाहते हैं. तो उसका मतलब यह है कि पूरा शीर्षक प्रदर्शित नहीं होता है। और हम चाहते हैं कि माउस होवर करने पर सारा टेक्स्ट प्रदर्शित हो।

आइए देखें कि हम CSS3 का उपयोग करके यह कैसे कर सकते हैं।

कंपनी-रैप उल ली (
पाठ-अतिप्रवाह: दीर्घवृत्त;
ओवर फलो हिडेन;
व्हाइट-स्पेस: अब्रैप; )

कंपनी का नाम

इन्वेस्टनेट एसेट मैनेजमेंट

रसेल निवेश

नॉर्थवेस्टर्न म्युचुअल फाइनेंशियल नेटवर्क

आईएनजी वित्तीय नेटवर्क

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

ब्राउज़रों के बीच समर्थन के साथ, इस संपत्ति में एक छोटी सी बारीकियां है। फ़ायरफ़ॉक्स को छोड़कर सभी बिल्कुल सही ढंग से प्रदर्शित होते हैं। लेकिन, सौभाग्य से, इस समस्या का एक समाधान है!

फ़ायरफ़ॉक्स में तीन बिंदु

दुर्भाग्य से, गेको (फ़ायरफ़ॉक्स में रेंडरिंग इंजन) इस संपत्ति का समर्थन नहीं करता है। तथापि यह ब्राउज़रएक्सबीएल का समर्थन करता हैजिसकी मदद से हम इस स्थिति से बाहर निकल सकेंगे।

गेको एक निःशुल्क वेब पेज लेआउट इंजन है। मोज़िला ब्राउज़रफ़ायरफ़ॉक्स, नेटस्केप और अन्य। पुराने नाम "रैप्टर" और "एनजीलेआउट" हैं। गेको की मुख्य अवधारणा HTML, CSS, W3C DOM, XML 1.0 और जावास्क्रिप्ट जैसे खुले वेब मानकों का समर्थन करना है। एक अन्य अवधारणा क्रॉस-प्लेटफ़ॉर्म है। आज गेको काम करता है ऑपरेटिंग सिस्टमलिनक्स, मैक ओएस एक्स, फ्रीबीएसडी और माइक्रोसॉफ़्ट विंडोज़, साथ ही सोलारिस, HP-UX, AIX, Irix, OS/2, OpenVMS, BeOS, Amiga और अन्य पर भी।

फ़ायरफ़ॉक्स में इलिप्सिस प्रदर्शित करने के लिए, हमें स्टाइल शीट में एक पंक्ति जोड़नी होगी।

यदि आप संपत्ति को अक्षम करना चाहते हैं, तो बस जोड़ें:

मोज़-बाइंडिंग: url("bindings.xml#none");

अगला कदम उसी स्थान पर बाइंडिंग.एक्सएमएल फ़ाइल बनाना है जहां स्टाइलशीट संग्रहीत है। हम कोई भी उपयोग कर सकते हैं पाठ संपादकइसके लिए! नीचे दिए गए कोड को कॉपी करें और फ़ाइल को बाइंडिंग.xml नाम दें।

document.getAnonymousNodes(यह)[ 0 ]
यह.लेबल.शैली
यह.शैली.प्रदर्शन
if(this.style.display != वैल) this.style.display= वैल

यह.लेबल.मान
if(this.label.value != val) this.label.value= val

var strings= this.textContent.split(/\s+/g)
if(!strings[ 0 ]) strings.shift()
यदि(!स्ट्रिंग्स[स्ट्रिंग्स.लेंथ - 1 ]) स्ट्रिंग्स.पॉप()
this.value= strings.join("")
this.display= strings.length ? "" : "कोई नहीं"

यह.अद्यतन()

यह.अद्यतन()

सभी ब्राउज़रों के लिए अंतिम कोड

कंपनी-रैप उल ली (
पाठ-अतिप्रवाह: दीर्घवृत्त;
-o-पाठ-अतिप्रवाह: दीर्घवृत्त;
-मोज़-बाइंडिंग: यूआरएल ("बाइंडिंग्स.एक्सएमएल#एलिप्सिस");
व्हाइट-स्पेस: अब्रैप;
ओवर फलो हिडेन;
}

CSS3 दुनिया भर के वेब डिज़ाइनरों के लिए न्यूनतम कोड के साथ पहले कभी न देखी गई वेबसाइट बनाने का उपकरण बन रहा है। सरल, वस्तुतः एक-पंक्ति समाधान हैं जो पहले केवल फ़ोटोशॉप या जावास्क्रिप्ट का उपयोग करके संभव थे। आज ही CSS3 और HTML5 की शक्ति सीखना शुरू करें और आपको इसका पछतावा नहीं होगा!

अनुवादकों की भीड़ से अलग दिखने और आपकी सहानुभूति जीतने के लिए, प्रिय पाठकों, मेरे पाठों के अंत में बुद्धिमान विचार और सूत्र होंगे। इन पंक्तियों में हर किसी को अपना कुछ न कुछ मिलेगा :)

जिसे आप बदल नहीं सकते उसे गरिमा के साथ सहन करें।

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

इसके लिए हमें चाहिए मदद मिलेगीहमारा पसंदीदा सीएसएस है. यह बहुत सरल है, देखो।

मान लीजिए कि हमारे पास उत्पाद सूची से इस तरह का एक ब्लॉक है:

यहाँ इसकी संरचना है:

चमत्कार युडो संध्या शक्ति दाता, रहस्यमय, कला। 20255-59

अत्यधिक कीमत पर एक अद्भुत उत्पाद, केवल 100 रूबल। यह आपकी अकेली शामों को रोशन कर देगा और आपको जीवन शक्ति का संचार देगा!

यहाँ उनकी शैलियाँ हैं:

समब्लॉक (बॉर्डर: 1px सॉलिड #cccccc; मार्जिन: 15px ऑटो; पैडिंग: 10px; चौड़ाई: 250px; ) .हेडर (बॉर्डर-बॉटम: 1px डैश्ड; फॉन्ट-साइज: 16px; फॉन्ट-वेट: बोल्ड; मार्जिन-बॉटम: 12px ; )

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

और यहां सीएसएस और इसकी जादुई टेक्स्ट-ओवरफ़्लो संपत्ति हमारी सहायता के लिए आती है। लेकिन इसे कई अन्य गुणों के साथ संयोजन में सही ढंग से उपयोग करने की आवश्यकता है। नीचे मैं आपको दिखाऊंगा तैयार समाधान, जिसके बाद मैं समझाऊंगा कि क्या है।

इसलिए, उत्पाद नामों के मैन्युअल संपादन और शैलियों की प्रोग्रामेटिक क्रॉपिंग को अलग रखते हुए, हम सीएसएस को अपने हाथों में लेते हैं और देखते हैं कि हमें क्या मिलता है:

चमत्कार युडो संध्या शक्ति दाता, रहस्यमय, कला। 20255-59

अच्छा, क्या यह बेहतर है? मेरी राय में, बहुत कुछ! और अपने माउस को शीर्षक पर ले जाएँ... वोइला! यहां यह हमें पूर्ण रूप से दिखाया गया है।

हमारी संरचना में कुछ भी नहीं बदला है, मैंने बस .header वर्ग और शीर्षक टैग के साथ एक div जोड़ा है। और यहां नई, अद्यतन शैलियाँ हैं:

देखो हमने क्या किया:

हमने ब्लॉक में व्हाइट-स्पेस: अब्रैप प्रॉपर्टी जोड़ी है, जो टेक्स्ट की शब्दों को एक नई लाइन में लपेटने की क्षमता को हटा देती है, जिससे वह एक लाइन में खिंच जाती है;
फिर हमने ओवरफ़्लो: छुपी हुई संपत्ति को जोड़ा, जिसने हमारी लाइन की दृश्यता को ब्लॉक की चौड़ाई तक सीमित कर दिया, जिससे सभी अतिरिक्त कट गए और इसे आगंतुक को नहीं दिखाया गया;
खैर, अंत में हमने text-overflow: ellipsis प्रॉपर्टी का उपयोग करके अपनी लाइन में एक इलिप्सिस जोड़ा, जिससे विज़िटर को पता चला कि यह लाइन का अंत नहीं है, और उन्हें संभवतः अपने माउस को स्थानांतरित करने और इसे देखने की आवश्यकता है भरा हुआ।

सीएसएस से प्यार करें, सीएसएस सीखें, और वेबसाइट बनाना आपको इतना कठिन नहीं लगेगा =)