शब्द-ब्रेक की नकल कैसे करें: ब्रेक-शब्द; IE9, IE11 और फ़ायरफ़ॉक्स

Question

IE9, IE11 और फ़ायरफ़ॉक्स के लिए word-break: break-word; की नकल कैसे करें?

ऐसा लगता है कि यह क्रोम में काम करता है। मैंने सीखा है और समझ लिया है कि यह एक गैर मानक, केवल वेबकिट है।

FYI करें, मैं का उपयोग कर की कोशिश की है,

white-space: pre-wrap; 

और कुछ और की तरह,

overflow-wrap: break-word; 

भी नीचे उल्लेख सीएसएस की कोशिश की,

word-wrap: break-word; 
word-break: break-word; 

लेकिन इन नहीं लग रहे काम करने के लिए।

मैं बनाकर अवधि (जो पाठ होता है) करने के लिए निश्चित चौड़ाई प्रदान नहीं कर सकते यह display: block; पाठ गतिशील है और उपयोगकर्ता की भू-स्थान के अनुसार अलग होगा स्पष्ट रूप से के रूप में। वर्तमान में हम लगभग 18 भाषाओं का समर्थन करते हैं।

यह कैसे कोड लग रहा है,

एचटीएमएल,

<div id="grid2"> 
    <span id="theSpan">Product Support</span> 
</div> 

सीएसएस,

#theSpan{ 
    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 */ 
    word-break: break-all; 
} 

#grid2{ 
    width: 100px; 
} 

यह इस तरह दिखता है,

मैं इसे की तरह बनना चाहता हूँ,

कृपया ध्यान दें:
मैं word-break: break-all; भाषाओं का अनुवाद लेख बहुत बड़ा है में से कुछ के लिए के रूप में उपयोग करने के लिए था और यह ग्रिड से बाहर overflows । पाठ 'उत्पाद समर्थन' गतिशील है।

अद्यतन:
मैं आईडी, grid2 साथ div के लिए एक निश्चित चौड़ाई है। भाषाओं में से एक में अनुवादित पाठ बहुत लंबा है, यह एक शब्द है और यह ग्रिड 2 div से बाहर बहता है।

कोड भी अपडेट किया गया।

Answer 1

जो आप ढूंढ रहे हैं उसे प्राप्त करने के लिए display:table-caption का उपयोग करें।

LIVE DEMO

एचटीएमएल :

<div id="grid2"> 
    <span id="theSpan">Product Support</span> 
</div> 

सीएसएस:

#theSpan{ 
    display:table-caption; 
} 

आशा इस मदद करता है। मेरी समस्या मामले में

word-break: break-word; 
word-wrap: break-word; 

मैं पहले से ही उपयोग कर रहा था:

Answer 2

मैं केवल उपयोग करने के साथ क्रोम, Firefox और IE में अच्छा सफलता मिली है

display: table-cell; 

और मैं

शामिल करने की आवश्यकता समाप्त हो गया

max-width: 440px; 

सभी ब्राउज़रों में लपेटने के लिए। ज्यादातर मामलों में अधिकतम चौड़ाई आवश्यक नहीं थी।