2010-04-29 28 views
10

लपेटकर एक ब्लॉक कंटेनर को देखते हुएसीएसएस लाइन

<div> 
this is a very long string which contains a bunch of characters that I want to break at container edges. 
</div> 

वहाँ किसी भी सीएसएस गुण मैं तोड़ने के लिए जब यह कंटेनर चौड़ाई तक पहुँच जाता है, स्ट्रिंग की सामग्री की परवाह किए बिना यह मजबूर करने के लिए सेट कर सकते हैं कर रहे हैं, उदाहरण के एक ब्रेक की तरह के लिए :

this is a ve 
ry long stri 
ng which ... 

मैं जो चाहता हूं वह काफी है। अभी, ऐसा लगता है कि वे व्हाइटस्पेस पात्रों या अन्य विशेष पात्रों (जैसे /) पर तोड़ना पसंद करते हैं।

+0

आप शायद http://doctype.com/questions पर पर एक ही प्रश्न पूछ सकते हैं :) –

+7

StackOverflow अभी भी प्रश्न के इन प्रकार के लिए पर्याप्त है। –

+0

@ मैग्नस: कोई अपराध नहीं, लेकिन मुझे तकनीकी रूप से छायांकित प्रश्नों के उत्तर के बहुत अच्छे स्रोत होने के लिए डॉक्टरेट नहीं मिला है। – Robusto

उत्तर

9

word-break नामक एक CSS3 प्रॉपर्टी है जो भविष्य में आपके लिए कुछ उपयोग हो सकती है।

अधिक जानकारी यहां उपलब्ध है: http://www.css3.com/css-word-break/

break-all मूल्य बात आप के लिए पूछ रहे हैं क्या करने के लिए लग रहा है:

उपयोगी जहां सामग्री जो इस के लिए एशियाई वर्ण सेट अधिकांश सामग्री, शामिल हैं मूल्य 'सामान्य' की तरह व्यवहार करता है। गैर-एशियाई चरित्र सेट सामग्री को मनमाने ढंग से लाइनों में तोड़ दिया जा सकता है।

सीएसएस के अधिक समर्थित संस्करणों के लिए, मुझे विश्वास नहीं है कि आप ऐसा कर सकते हैं।

+0

धन्यवाद, CSS3 संपत्ति "शब्द-ब्रेक: ब्रेक-सब;" वेबकिट में काम किया, लेकिन दुख की बात यह है कि यह फ़ायरफ़ॉक्स में काम नहीं करता है (या कहीं और छुपा हुआ है)। एक ब्राउज़र किया, कुछ जाने के लिए :)। – Mic

+0

स्वीकृत, चूंकि आपने इसे कुछ ब्राउज़रों के लिए हल किया है। फ़ायरफ़ॉक्स के लिए अभी तक सीएसएस के साथ हल करना संभव नहीं लगता है :( – Mic

+2

यह अब अधिकांश ब्राउज़रों में काम करता है। Http://caniuse.com/#search=word-break – Josh

4

इस

<style type="text/css"> 
div { 
white-space: -moz-pre-wrap; /* Mozilla, supported since 1999 */ 
white-space: -pre-wrap; /* Opera 4 - 6 */ 
white-space: -o-pre-wrap; /* Opera 7 */ 
white-space: pre-wrap; /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */ 
word-wrap: break-word; /* IE 5.5+ */ 
} 
</style> 

<div style="width:200px"> 
adsjflk;asjfl;kasdjfl;kasdjfl;kasdjf;lkasdjf;lkasdjf;lkasjdf;lkajsd;lkadfjs;l 
</div> 
+0

देखें, दुख की बात है कि यह अभी भी तोड़ना पसंद करता है हाइफ़न और व्हाइटस्पेस, यदि यह (वेबकिट) कर सकता है। फ़ायरफ़ॉक्स में यह उपरोक्त वर्णों पर टूट जाता है/:( – Mic

1

वैकल्पिक रास्ता एक माता पिता div में div enclosing और माता पिता div की चौड़ाई निर्धारित करके ही प्राप्त की कोशिश करो। हालांकि यह आदर्श समाधान नहीं हो सकता है।

<div style="width:50px"> 
     <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div> 
     </div> 
+0

दुख की बात है कि ऐसा लगता है कि अधिकांश ब्राउज़र अभी भी व्हाइटस्पेस पर तोड़ना पसंद करते हैं यदि निम्न शब्द वर्तमान पंक्ति पर फिट नहीं है : /। – Mic

संबंधित मुद्दे