क्या एक शब्द में लंबे शब्दों को लपेटने का एक तरीका है?

173

मुझे पता है कि इंटरनेट एक्सप्लोरर में एक शब्द-आवरण शैली है, लेकिन मैं यह जानना चाहूंगा कि क्या किसी div में पाठ करने के लिए कोई क्रॉस-ब्राउज़र विधि है।

अधिमानतः सीएसएस, लेकिन जावास्क्रिप्ट स्निपेट्स भी ठीक काम करेगा।

संपादित करें: हाँ, लंबे तार का जिक्र करते हुए, लोगों को खुश करते हैं!

css html word-wrap

— रदरफोर्ड
स्रोत

7

वर्ड रैपिंग डिफ़ॉल्ट रूप से होती है। जब अलग शब्द नहीं हैं तो क्या आपका मतलब है लपेटना ?

— क्वेंटिन

313

मूल टिप्पणी को पढ़ते हुए, रदरफोर्ड अखंड पाठ को लपेटने के लिए एक क्रॉस-ब्राउज़र तरीके की तलाश कर रहा है (आईई के लिए वर्ड-रैप के अपने उपयोग से अनुमान लगाया गया है, अखंड तार तोड़ने के लिए बनाया गया है)।

/* Source: http://snipplr.com/view/10979/css-cross-browser-word-wrap */
.wordwrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

मैंने इस वर्ग का उपयोग अभी थोड़ा किया है, और एक आकर्षण की तरह काम करता है। (नोट: मैंने केवल फ़ायरफ़ॉक्स और IE में परीक्षण किया है)

— हारून बेनेट
स्रोत

पुराना पोस्ट, लेकिन यह रिक्त स्थान रेंडर करने के लिए प्रकट नहीं होता है जब IE quirks मोड में है।

— जेरेमी

2

मैं फ़ायरफ़ॉक्स 24.6.0 का उपयोग कर रहा हूं, और word-wrap: break-wordवास्तव में यही काम कर रहा है।

— user545424

3

Word-wrap: break-wordहालाँकि Microsoft द्वारा बनाया गया अब CSS 3 मानक का हिस्सा है और चाल क्या है :-)

— Pascal_dher

38

पिछले जवाब के अधिकांश फ़ायरफ़ॉक्स 38.0.5 में मेरे लिए काम नहीं किया। यह किया ...

<div style='padding: 3px; width: 130px; word-break: break-all; word-wrap: break-word;'>
    // Content goes here
</div>

प्रलेखन:

— पॉल ज़हरा
स्रोत

2

धन्यवाद! यह एकमात्र उत्तर है जिसने काम किया (शब्द-विराम: ब्रेक-ऑल; जो मेरे लिए काम किया है)

— DaniCE

14

white-space: pre-wrap

quirksmode.org/css/whitespace.html

— NVI
स्रोत

4

मृत लिंक। कृपया अधिक गहन उत्तर प्रदान करें।

— जोशिएट्स

12

हारून बेनेट का समाधान मेरे लिए पूरी तरह से काम कर रहा है, लेकिन मुझे इस लाइन को उसके कोड से हटाना पड़ा -> white-space: -pre-wrap;क्योंकि यह एक त्रुटि दे रहा था, इसलिए अंतिम कार्य कोड निम्नलिखित है:

.wordwrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

आपका बहुत बहुत धन्यवाद

— ह्यूगो
स्रोत

1

हारून बेनेट ने आपके सामने 2 साल पहले इसी उत्तर का उल्लेख किया था। आपने यहां क्या किया वह मूल्य नहीं जोड़ता है।

— AAA

6

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

— ह्यूगो

मुझे इस "व्हाइट-स्पेस: -पर-रैप" को जोड़ना था और इसने काम किया :)

— रवि

0

डेविड का उल्लेख के रूप में, DIVs करना डिफ़ॉल्ट रूप से चादर शब्द।

यदि आप रिक्त स्थान के बिना पाठ के वास्तव में लंबे तार का उल्लेख कर रहे हैं, तो मैं क्या करता हूं स्ट्रिंग सर्वर-साइड प्रक्रिया है और खाली स्पैन सम्मिलित करें:

thisIsAreallyLongStringThatIWantTo<span></span>BreakToFitInsideAGivenSpace

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

— महंगाई भत्ते।
स्रोत

@ टोमहार्ट वास्तव में अजीब है। हालांकि, अच्छी तरह से, IE। यह कभी काम नहीं करता है। उस ने कहा, यह 5 साल पहले पोस्ट किया गया था। CSS3 में अब कुछ बेहतर वर्ड-रैप विकल्प हैं, जो IE डेवलपर डेवलपर

— .

हाँ, मुझे पता है, मैं इस समाधान की सरलता से हैरान था कि मुझे इसकी कोशिश करनी थी :)

— टॉम हर्ट

0

आप div के लिए एक चौड़ाई निर्दिष्ट करने का प्रयास कर सकते हैं, चाहे वह पिक्सेल, प्रतिशत या ems में हो, और उस बिंदु पर div उस चौड़ाई में रहेगा और पाठ स्वचालित रूप से फिर div के भीतर लपेट जाएगा।

— Slevin
स्रोत

10px चौड़ाई सेट करने का प्रयास करें ... और फिर 10px से अधिक लंबे शब्द का उपयोग करें

— पॉल ज़हरा