पाठ को लंबवत रूप से ट्रिम करना या पाठ ऊंचाई में फिट नहीं होने पर क्या करें

यदि यह आपके लिए परिचित है, तो मैं एक बिल्ली के लिए पूछता हूं।


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

<div class="box"> <h2>A Long Message</h2> <p>This is a very long message and will be cut off. This is a very long message and will be cut off. </p> <p>This is a very long message and will be cut off. This is a very long message and will be cut off. </p> </div> 

और सीएसएस:

 h2 { font-size: 1.3em; } .box { margin: 1em; border: 1px solid #ccc; width: 150px; height: 55px; overflow: hidden; } 

इस स्थिति में, हमारे पाठ की संभावना आधे में कटौती की जाएगी।
अब अगर हम इस प्रभाव से छुटकारा पाना चाहते हैं तो हमें कुछ प्रकार के आवरण (रैपर) जोड़ने होंगे:

 <div class="box"> <div class="wrapper"> <h2>A Long Message</h2> <p>This is a very long message and will be cut off. This is a very long message and will be cut off. </p> <p>This is a very long message and will be cut off. This is a very long message and will be cut off. </p> </div> </div> 

यहाँ इस शैली या शैली के साथ:

 .wrapper { -webkit-column-width: 150px; //        , 100%   column-width: 150px; height: 100%; } 

वास्तव में यह सब ... जो लाइनें फिट नहीं हुईं, वे अगले कॉलम में प्रवाहित होंगी, और चूंकि मूल ब्लॉक में अतिप्रवाह है: छिपी हुई, हम उन्हें नहीं देखेंगे। इस दृष्टिकोण का नकारात्मक पहलू केवल ब्राउज़र द्वारा इस क्रिया को पूरा करने की गति हो सकता है, लेकिन यह जेएस सरोगेट्स की तुलना में बहुत तेज है। यदि आप ब्राउज़र समर्थन के बारे में चिंतित हैं, तो यह पहले से ही बहुत अच्छा है: caniuse.com/multicolumn । यहाँ एक कार्यशील उदाहरण है: jsfiddle.net/4Fpq2/9 ।
मैं अग्रिम में माफी माँगता हूँ अगर यह मेरे लिए सिर्फ एक खोज निकला।