2012-12-15 20 views
5

के साथ संयुक्त है तो मैं word-break को text-overflow के साथ गठबंधन करने की कोशिश कर रहा हूं जो किसी बिंदु पर काम करता है लेकिन यह नहीं होना चाहिए।सीएसएस शब्द-ब्रेक टेक्स्ट-ओवरफ्लो

उदाहरण के लिए, मैं इस Fiddle

सीएसएस की स्थापना की है:

width: 200px; 
padding: 8px; 
border:1px solid blue; 
word-break: break-word; 
height: 100px; 
overflow: hidden; 
text-overflow:ellipsis; 
white-space:nowrap; 

स्पष्टीकरण के लिए, एक बार पाठ भागों यह बॉक्स भरना चाहिए करने के लिए और पाठ के अंत में में टूट गया है नहीं होना चाहिए 3 डॉट्स वर्तमान में केवल एक ही पंक्ति है जहां यह काम करता है।

+0

FWIW:: वहाँ एक [प्रस्ताव और चर्चा] (http://lists.w3.org/Archives/Public/www-style/2012Jan/0627 है

यहाँ एक jQuery प्लगइन का एक उदाहरण है। एचटीएमएल) multiline ग्रंथों के लिए टेक्स्ट ओवरफ्लो का उपयोग करने के लिए [email protected] मेलिंग-सूची में। –

उत्तर

3

जहां तक ​​मुझे पता है, सीएसएस का उपयोग करना संभव नहीं है।

केवल एक चीज जो आप कर सकते हैं height, और overflow:hidden निर्दिष्ट करें। (अंत में कोई इलिप्सिस नहीं।)

यह W3 spec for text-overflow में कहा गया है।

अंडाकार
एक अंडाकार स्ट्रिंग प्रत्येक बॉक्स सीमाओं जहां एक पाठ अतिप्रवाह होता है पर डाला जाता है। इन इलिप्सिस स्ट्रिंग्स के मान 'टेक्स्ट-ओवरफ्लो-इलिप्सिस' प्रॉपर्टी द्वारा निर्धारित किए गए हैं। सम्मिलन पाठ
के लाइन के अंतिम पूर्ण ग्लिफ़ प्रतिनिधित्व की सीमा पर हुई जगह ले ...
दूसरे शब्दों में, पाठ-अतिप्रवाह मोड केवल एक ब्लॉक तत्व जो में भाग लेने की पाठ्य सामग्री को प्रभावित करता है इसका अपना इनलाइन प्रवाह।

आपको इसे प्राप्त करने के लिए जावास्क्रिप्ट का उपयोग करने की आवश्यकता होगी। http://pvdspek.github.com/jquery.autoellipsis/