सीएसएस वर्ड-रैप अपेक्षित के रूप में काम नहीं कर रहा है

Question

शब्द लपेटने की संपत्ति नीचे दिए गए उदाहरण में ठीक से क्यों काम नहीं करती है?

http://jsfiddle.net/k5VET/739/

क्या मैं शब्द 'consectetur' पहली पंक्ति अपने आप में फिट बैठता है के उस भाग को सुनिश्चित करने के लिए कर सकते हैं? मैं प्रत्येक पंक्ति में अधिकतम वर्णों को फिट करना चाहता हूं।

सीएसएस है:

#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-size:14px; 
    font-weight: normal; 
    line-height: 18px; 
    width: 238px; 
    height:38px; 
    cursor: pointer; 
    word-wrap:break-word; 
    border:2px solid; } 

Answer 1

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

#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-size:14px; 
    font-weight: normal; 
    line-height: 18px; 
    width: 238px; 
    height:38px; 
    cursor: pointer; 
word-break: break-all; 
    border:2px solid; } 

LIVE DEMO

Answer 2

यह ठीक से लपेट नहीं है क्योंकि ब्राउज़र स्वत: हायफ़नेशन (जो पैदा करने के लिए तरीका होगा लागू नहीं है डिफ़ॉल्ट रूप से उचित रैपिंग)। आपको सीएसएस हाइफेनेशन या जावास्क्रिप्ट-आधारित हाइफेनेशन का उपयोग करने की आवश्यकता है। परिभाषा word-wrap:break-word, साथ ही साथ word-break: break-all, परिभाषा शब्दों को विभाजित करता है (उचित रैपिंग के बजाय आर्बिट ररी पॉइंट टीएस पर टुकड़े को विभाजित करता है)।

Answer 3

क्योंकि सीएसएस शब्द-लपेट सभी ब्राउज़रों में काम नहीं करता है, इसके बजाय जावास्क्रिप्ट का उपयोग करें! यह एक ही परिणाम देना चाहिए।

नीचे दिए गए फ़ंक्शन को JQuery की आवश्यकता है और यह प्रत्येक बार विंडो पुनः आकार के लिए चलाएगा।

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

मुझे केवल टेबल के लिए इसकी आवश्यकता है, इसलिए यदि आप इसे किसी अन्य तत्व में चाहते हैं, तो बस "टेबल" को "#yourId" या ".yourClass" में बदलें। सुनिश्चित करें कि कोई अभिभावक-div है या "div" को "body" में बदल सकता है या कुछ?/

$(window).on('resize',function() { 
    $('table').each(function(){ 
     if($(this).width() > $(this).parent('div').width()){ 
      $(this).css('word-break', 'break-all'); 
     } 
     else{ 
      $(this).css('word-break', 'break-word'); 
      if($(this).width() > $(this).parent('div').width()){ 
       $(this).css('word-break', 'break-all'); 
      } 
     } 
    }); 
}).trigger('resize'); 

'मुझे उम्मीद है कि इसके लिए काम करता है:

यदि यह किसी और के लिए जाना जाएगा, यह शब्द-तोड़ में परिवर्तन और उसके बाद जाँच लें कि इसे वापस बदलना चाहिए, क्यों इतना कोड है कि है .. आप!

Answer 4

तो word-wrap: break-all काम नहीं करते, यह भी कोशिश इस जोड़ें: बूटस्ट्रैप 3

Answer 5

यह एक पंक्ति में पाठ लपेटकर के लिए उपयोगी है में .btn वर्ग के साथ मेरे लिए

white-space:normal; 

काम:

#fos { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    width: 100%; 
}