सीएसएस: क्या आप ओवरफ्लो को रोक सकते हैं: पाठ की अंतिम पंक्ति को काटने से छिपा हुआ है?

Question

सीएसएस ओवरफ़्लो का उपयोग करते समय: छुपा, मुझे अक्सर पता चला है कि टेक्स्ट की आखिरी पंक्ति आंशिक रूप से कट ऑफ हो जाती है। क्या इसे रोकने के लिए कोई तरीका है ताकि कोई आंशिक रेखाएं दिखाई न दें। लगभग एक लंबवत शब्द-लपेट की तरह।

Answer 1

Rob सही है। मैं एक div बना रहा था जिसमें 11 मीटर की अधिकतम ऊंचाई थी और अतिप्रवाह पाठ की आखिरी पंक्ति केवल आधे थी। सफेद-स्थान: अब्रैप बस उस आखिरी पंक्ति को एक साथ हटा देता है।

मैंने कोशिश की

white-space: nowrap; 

और Gaby है कि इस समस्या है भी कारण बनता है भी सही है।

सबसे अच्छा मैं line-height और div ऊंचाई के साथ बेला को था, जब तक सबसे कम लाइनों कट गया के साथ आया था

Answer 2

यह समाधान मेरे लिए काम किया: https://stackoverflow.com/a/17413577/2540428 अनिवार्य रूप से उचित गद्दी के साथ एक आवरण div बनाने और सामग्री को मुख्य div में रखें जहां आप इसकी ऊंचाई संपादित करते हैं और ओवरफ़्लो छुपाते हैं। अधिक जानकारी के लिए लिंक देखें।

Answer 3

आप आवरण div और बहु-स्तंभ सीएसएस का उपयोग कर सकते हैं:

.wrapper { 
    -webkit-column-width: 150px; //You can't use 100% 
    column-width: 150px; 
    height: 100%; 
} 

समाधान उदाहरण:http://jsfiddle.net/4Fpq2/9/

अद्यतन 2017-09-21

Firefox में इस समाधान अभी भी काम करता है लेकिन क्रोम में तोड़ दिया। हाल ही में क्रोम ने छोटे हिस्सों से ब्रेक कॉलम शुरू किया, यदि आप ऊंचाई सेट करते हैं तो ब्रेक सामग्री भी बंद करें। इस http://jsfiddle.net/4Fpq2/446/ उदाहरण में, मैं अधिकतम ऊंचाई तक हाइट बदलता हूं और अजीब क्रोम व्यवहार दिखाता हूं। यदि आपके पास विचार हैं तो कृपया टिप्पणियों में लिखें।

Answer 4

दो सीएसएस 3 संपत्ति मौजूद हैं। 1) शब्द-ब्रेक & 2) शब्द-एआरपी

यह भूलें कि ये नई संपत्ति सीएसएस 3 है। ताकि पुराने ब्राउज़र ऐसी संपत्ति का समर्थन न करें।

.class-name {word-break: break-all;} 
.class-name {word-wrap: break-word;} 

Answer 5

एक बार जब आप समझ कैसे column-width काम, @ stalkerg के जवाब भावना का एक बहुत बनाता है।

column-width कॉलम में सामग्री को विभाजित करता है, इसलिए टेक्स्ट की अंतिम पंक्ति फिट नहीं होगी, इसे अगले कॉलम में ले जाया जाएगा। अब यह चालक कॉलम-चौड़ाई को कंटेनर के रूप में चौड़ा बनाना है। कंटेनर में अतिप्रवाह है: छुपा हुआ, इसलिए दूसरा कॉलम शो नहीं होगा।

.box { 
    width: 200px; 
} 
.container { 
    -webkit-column-width: 200vw; 
    -moz-column-width: 200vw; 
    column-width:   200vw; 
    height:    100%; 
} 

Answer 6

बस कॉलम-चौड़ाई विशेषता जोड़ें और कंटेनर की चौड़ाई सेट करें, यह काम करेगा।

Answer 7

कि मेरे लिए काम किया:

.wrapper_container{ 
    width: 300px; 
    height: 200px; 
    overflow: hidden; 
} 

.wrapper{ 
    -webkit-column-width: 300px; 
    column-width: 300px; 
    height: 100%; 
}