एक DIV में एक लंबे शब्द में एक लाइन ब्रेक को मजबूर करने के लिए कैसे?

Question

ठीक है, यह वास्तव में मुझे भ्रमित कर रहा है। मेरे पास div के अंदर कुछ सामग्री है जैसे:

<div style="background-color: green; width: 200px; height: 300px;">

Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.

</div>

हालाँकि, सामग्री DIV से अधिक है (जैसा कि अपेक्षित है) क्योंकि 'शब्द' बहुत लंबा है।

मैं ब्राउज़र को उस शब्द को 'ब्रेक' करने के लिए कैसे मजबूर कर सकता हूं जहां सभी सामग्री को अंदर फिट करने के लिए आवश्यक है?

Comments

इस प्रश्न पर एक नज़र डालें: stackoverflow.com/questions/2046530/…

— nicf

Answer 1

उपयोग word-wrap:break-word;

यह IE6 में भी काम करता है, जो एक सुखद आश्चर्य है।

---

word-wrap: break-wordoverflow-wrap: break-word;जिसे हर आधुनिक ब्राउज़र में काम किया गया है। IE, एक मृत ब्राउज़र होने के नाते, हमेशा के लिए पदावनत और गैर-मानक पर निर्भर करेगा word-wrap।

word-wrapआज के मौजूदा उपयोग अभी भी काम कर रहे हैं क्योंकि यह overflow-wrapविनिर्देश के अनुसार एक उपनाम है ।

Comments

दरअसल, वर्ड-रैप एक IE आविष्कार है। तो कोई आश्चर्य नहीं कि यह IE :) में काम करता है

— सावास वेदोवा

इस तालिका में काम करने के लिए के लिए, आप लागू करना पड़ सकता table-layout: fixed;मेज पर

— सर्ज सगन

word-wrap: break-wordमेरे लिए काम नहीं किया, लेकिन word-break: break-wordजैसा कि @rahul ने सुझाव दिया नीचे काम किया।

— यवेस

नोट: यह तभी काम करेगा जब आप इसे IE में पैरेंट डिव में देंगे (डिव के अंदर के इनर स्पेंड में नहीं)।

— एसएमएस

Answer 2

मुझे ब्राउज़र संगतता के बारे में निश्चित नहीं है

word-break: break-all;

इसके अलावा, आप <wbr>टैग का उपयोग कर सकते हैं

<wbr>(शब्द विराम) का अर्थ है: "यदि इच्छा हो तो ब्राउज़र यहाँ एक पंक्ति विराम प्रविष्ट कर सकता है।" यह ब्राउज़र नहीं सोचता कि लाइन ब्रेक जरूरी नहीं है।

Comments

उस शब्द-विराम से अवगत रहें: विराम-सब; बीच में शब्दों को तोड़ देगा यदि यह अभी भी किसी भी वर्ण को अन्य शब्दों के साथ एक पंक्ति में पहले फिट कर सकता है, जो वांछित परिणाम नहीं हो सकता है, जबकि शब्द-लपेट: ब्रेक-वर्ड; शब्दों को एक नई रेखा पर ले जाता है और केवल शब्द को तोड़ता है यदि यह कंटेनर में अपनी लाइन पर फिट होने के लिए बहुत लंबा है। उदाहरण: jsfiddle.net/4AKhn/1

— एलेक्स्टेग

ब्रेक-सब टूट जाता है। विशिष्ट वर्ग के साथ उपयोग करने के लिए ठीक है, जिसमें केवल लंबे समय तक URL आदि हैं, लेकिन बॉडी या पी के साथ नहीं

— उपेंद्र

यह निश्चित रूप से पूरी तरह से (और वांछित) स्वीकार्य है जब आप लॉग टेबल सेल में एक अनुरोध URI की तरह कुछ प्रदर्शित करने की कोशिश कर रहे हैं, और इसे एक विशाल लंबी सेल के साथ पूरी मेज को तोड़ने से रोकने की आवश्यकता है। एक 'शब्द' के बीच में तोड़ना चाहता है;) जबकि स्वीकृत जवाब इस संबंध में स्क्वाट नहीं करता है।

— इनक्रेडिबल

@ Skelly1983 IE12

— TylerH

@ टायलर मुझे इस बारे में पता है, 3 साल बाद मुझे यह बताने के लिए धन्यवाद। यह w3 टैग के लिए w3schools ब्राउज़र सपोर्ट चार्ट पर सूचीबद्ध है, जो समर्थन को "इंटरनेट एक्सप्लोरर / एज" के रूप में सूचीबद्ध करता है और इसमें संस्करण संख्या 12.0 के रूप में सूचीबद्ध है, जो वास्तव में एज का पहला संस्करण है।

— Skelly1983 17

Answer 3

इसे 'क्रॉस-ब्राउज़र' समाधान के लिए स्वीकृत उत्तर में जोड़ा जा सकता है।

सूत्रों का कहना है:

• http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/
• http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

.your_element{
    -ms-word-break: break-all;
    word-break: break-all;

 /* Non standard for webkit */
     word-break: break-word;

    -webkit-hyphens: auto;
       -moz-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
}

Comments

मुझे यह क्रोम / ओपेरा और सफारी पर मिला, लेकिन फिर भी फ़ायरफ़ॉक्स और IE पर नहीं मिला। इसके साथ मैंने फ़ायरफ़ॉक्स को हल किया, लेकिन IE अभी भी कंटेनर के ऊपर जा रहा है (मेरे पास केवल अल्फा-न्यूमेरिक वर्णों का एक लंबा फ़ाइल नाम है)।

— कामाफेदर

हाय कामाफेदर, मुझे यकीन नहीं है, लेकिन अगर आप टूटने के लिए उपस्थित हो रहे हैं, तो ifitisareallylongfilename, संपूर्ण संदर्भ (ब्राउज़र, html-css कोड) आपकी मदद कर सकता है। शायद, आप अपनी स्थिति के साथ एक और प्रश्न बना सकते हैं।

— मिल्के पैटरन

कृपया ध्यान दें कि यह शब्दों को अप्राकृतिक स्थानों पर तोड़ता है।

@ user1322720 एक "अप्राकृतिक" स्थान क्या है?

— टायलरएच

Answer 4

मैं बस एक ही मुद्दे पर Googling था, और यहां अपना अंतिम समाधान पोस्ट किया । यह इस प्रश्न के लिए भी प्रासंगिक है।

आप इसे एक डिव के साथ आसानी से स्टाइल दे सकते हैं word-wrap: break-word(और आपको इसकी चौड़ाई भी सेट करने की आवश्यकता हो सकती है)।

div {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
    width: 100%;
}

हालांकि, तालिकाओं के लिए , आपको आवेदन करने की भी आवश्यकता है table-layout: fixed:। इसका अर्थ है कि कॉलम की चौड़ाई अब तरल नहीं है, लेकिन केवल पहली पंक्ति में (या निर्दिष्ट चौड़ाई के माध्यम से) स्तंभों की चौड़ाई के आधार पर परिभाषित किया गया है। यहां अधिक पढ़ें ।

नमूना कोड:

table {
    table-layout: fixed;
    width: 100%;
}

table td {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
}

Comments

टेबल सॉल्यूशन के लिए धन्यवाद;) हालांकि, मुझे यह समझ में नहीं आया कि ऑटो लेआउट के साथ ब्रेक-वर्ड का उपयोग क्यों नहीं किया जा सकता है। कोई उपाय?

— ondObno

@ondObno हाँ मुझे तकनीकी कारण पर यकीन नहीं है, लेकिन कई ब्राउज़र इस तरह का व्यवहार करते हैं। शायद यह इसलिए है क्योंकि प्रत्येक कॉलम की चौड़ाई निर्धारित करने के लिए आवश्यक सभी गणनाओं के साथ सुपर लंबे शब्द गड़बड़ करते हैं।

— साइमन ईस्ट

width: 100%;एफएफ और क्रोम पर मेरे लिए यह काम करने का एकमात्र तरीका सेटिंग था!

— पुत्जी सैन

Answer 5

​एक यूनिकोड वर्ण के लिए HTML इकाई है जिसे शून्य-चौड़ाई स्थान (ZWSP) कहा जाता है जो एक अदृश्य वर्ण है जो लाइन-ब्रेक अवसर को निर्दिष्ट करता है। इसी तरह हाइफ़न का उद्देश्य एक शब्द सीमा के भीतर एक लाइन-ब्रेक अवसर को निर्दिष्ट करना है।

Comments

बहुत अच्छी टिप! बस पूरक के लिए: ​एक सफेद-स्थान की तुलना में कम प्राथमिकता होती है (अर्थात यदि पास में कोई है, तो लाइन एक सफेद-स्थान में टूट जाएगी)।

— CPHPython

लगता है कि <wbr/>यूनिकोड समतुल्य है जिसकी मैं तलाश कर रहा था

— एक्सनोस

Answer 6

पाया कि फ्लेक्सबॉक्स का उपयोग करते हुए और भरोसा करते समय फ़ायरफ़ॉक्स (v50.0.2) को छोड़कर अधिकांश प्रमुख ब्राउज़रों (क्रोम, IE, सफारी आईओएस / ओएसएक्स) में काम किया गया width: auto।

.your_element {
    word-wrap: break-word;   
    overflow-wrap: break-word;
    word-break: break-word;
}

नोट: यदि आप एक ऑटोप्रिफ़र का उपयोग नहीं कर रहे हैं, तो आपको ब्राउज़र विक्रेता उपसर्ग जोड़ने की आवश्यकता हो सकती है।

देखने के लिए एक और बात यह है कि  रिक्ति के लिए पाठ का उपयोग करने से लाइन टूट सकती है मध्य-शब्द।

Comments

मुझे ठीक इसी की आवश्यकता थी। अन्य समाधान चौड़ाई के साथ काम नहीं करते हैं: 100%। एक बात ध्यान दें: शब्द-विराम: विराम-शब्द; शब्द-विराम

— 22

Answer 7

सीएसएस word-wrap:break-word; , फायरफॉक्स 3.6.3 में परीक्षण किया गया

Answer 8

मैंने नीचे कोड के साथ अपनी समस्या हल की।

display: table-caption;

Answer 9

निकालें white-space: nowrap, अगर कोई है।

लागू:

white-space: inherit;
word-break: break-word;

Answer 10

व्हॉट्सएप ब्राउज़र द्वारा संरक्षित है। जब आवश्यक हो, और पंक्ति विराम पर पाठ लपेट जाएगा

.pre-wrap {
    white-space: pre-wrap;
    word-break: break-word;
}

डेमो

td {
   word-break: break-word;
   white-space: pre-wrap;
   -moz-white-space: pre-wrap;      
}

table {
    width: 100px;
    border: 1px solid black;
    display: block;
}

<table>
<tr><th>list</th>
<td>
1.longtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtext
2.breaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreakline
</td>
</tr>
</table>

Answer 11

से MDN :

overflow-wrapसीएसएस संपत्ति निर्दिष्ट करता है या नहीं, ब्राउज़र अपनी सामग्री बॉक्स बह निकला से पाठ को रोकने के लिए शब्द के अंतर्गत लाइन ब्रेक लगाना चाहिए।

इसके विपरीत word-break, overflow-wrapकेवल एक विराम पैदा करेगा अगर एक पूरे शब्द को अतिप्रवाह के बिना अपनी लाइन पर नहीं रखा जा सकता है।

तो आप उपयोग कर सकते हैं:

overflow-wrap: break-word;

क्या मैं उपयोग कर सकता हूं ?

Answer 12

पहले आपको अपने तत्व की चौड़ाई की पहचान करनी चाहिए। उदाहरण के लिए:

#sampleDiv{
  width: 80%;
  word-wrap:break-word;
}

<div id="sampleDiv">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

ताकि जब पाठ तत्व की चौड़ाई तक पहुंच जाए, तो इसे लाइनों में तोड़ दिया जाएगा।

Answer 13

जैसा कि @ davidcondrey के उत्तर में उल्लेख किया गया है, केवल ZWSP ही नहीं है, बल्कि SHY भी ­ ­है जिसका उपयोग बहुत लंबे, निर्मित शब्दों (जर्मन या डच) में किया जा सकता है, जिसे आप जिस स्थान पर चाहते हैं , वहां तोड़ना होगा। अदृश्य है, लेकिन यह उस पल की एक हाइफ़न देता है, जिसकी आवश्यकता है, इस प्रकार दोनों शब्द जुड़े हुए हैं और लाइन पूरी तरह से भरी हुई है।

इस तरह से शब्द luchthavenpolitieagent के रूप में उल्लेख किया जा सकता है lucht­haven­politie­agentजो शब्द के शब्दांश की तुलना में लंबे समय तक भाग देता है।
हालाँकि मैंने इसके बारे में कुछ भी आधिकारिक नहीं पढ़ा है, ये सॉफ्ट हाइफ़न निर्माण के एकल शब्दों में आधिकारिक हाइफ़न की तुलना में ब्राउज़र में उच्च प्राथमिकता प्राप्त करने का प्रबंधन करते हैं ( यदि उनके पास इसके लिए कुछ विस्तार है)।
व्यवहार में, कोई भी ब्राउज़र अपने द्वारा इतने लंबे, निर्मित शब्द को तोड़ने में सक्षम नहीं है; छोटी स्क्रीन पर इसके परिणामस्वरूप एक नई लाइन या कुछ मामलों में भी एक शब्द-लाइन (जैसे कि उन निर्मित शब्दों में से दो का पालन होता है)।

FYI करें: यह एयरपोर्ट पुलिस अधिकारी के लिए डच है

Answer 14

शब्द-विराम: शब्द-विराम की तुलना में सामान्य का उपयोग करना बेहतर प्रतीत होता है: विराम-शब्द क्योंकि ब्रेक-शब्द प्रारंभिक जैसे EN को तोड़ता है

word-break: normal

Answer 15

यह करो:

<div id="sampleDiv">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

#sampleDiv{
   overflow-wrap: break-word;
}

Answer 16

बस हमारी शैली में यह प्रयास करें

white-space: normal;

Comments

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

— जेरेमी बैंक्स

यह सीएसएस द्वारा किए गए ओवरराइड पर निर्भर करता है। मेरे मामले में, मुझे अपने जेएसएफ घटक में "शैली" को डिफ़ॉल्ट सीएसएस शैली को ओवरराइड करने के लिए फिर से तैयार करना पड़ा जो कि "सफेद-स्थान: सामान्य नहीं था;"

— बेंजामिन फुएंतेस