प्रतिशत चौड़ाई के साथ टेबल सेल में लंबे शब्द को तोड़ें

Question

http://jsfiddle.net/L2yLe/

मूर्ख यह सब कहता है। मैं एक सीएसएस-केवल समाधान चाहता हूं जो तालिका की चौड़ाई को div की चौड़ाई तक सीमित करता है। लंबी स्ट्रिंग टूटा जाना चाहिए (लेकिन जैसा कि आप देख सकते हैं कि यह नहीं है), और यह तालिका को बहने का कारण बनता है।

मैं किसी भी पिक्सेल चौड़ाई का उपयोग नहीं करना चाहता। यह पूरी तरह से तरल पदार्थ होना चाहिए।

<div> 
<table> 
    <tr> 
     <td> 
      short string 
     </td> 
     <td> 
somereallylongstringofdatasomereallylongstringofdatasomereallylongstringofdata 
     </td> 
     <td> 
      short string 
     </td> 
    </tr> 
</table> 
</div> 

div { 
    width: 50%; 
    background-color: darkgray; 
    padding: 15px; 
    margin: 10px auto; 
} 
table { 
    border-collapse: collapse; 
} 
td { 
    border: 1px solid black; 
} 

Answer 1

दोस्तों http://blog.kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/

/* Warning: Needed for oldIE support, but words are broken up letter-by-letter */ 
    -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; 

Answer 2

एक CSS3 संपत्ति नहीं है: word-wrap: break-word; ... ओएफसी कि CSS3 के समर्थन के लिए ब्राउज़र की आवश्यकता है।

Answer 3

लिखने इस:

table { 
border-collapse: collapse; 
    table-layout: fixed; 
    width:100% 
} 
td { 
    border: 1px solid black; 
    word-wrap:break-word; 
} 

चेक करें: http://jsfiddle.net/L2yLe/7/

Answer 4

मैं थोड़ी देर के लिए इस के साथ arround खेल रहा है, और इसकी बिल्कुल भी साबित करना आसान नहीं।

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

मेरे पास एक समाधान है, लेकिन इसके बजाय एक बहु पंक्ति तालिका में जोड़ने के लिए बहुत कुछ संभवतः अत्यधिक होगा, अगर मैं किसी और को इसमें सुधार कर सकता हूं, तो मैं यहां डालूंगा, मेरे पास कोई HTML डेवलपर नहीं है और बस अपने आप को तर करने के लिए शुरू कर दिया है, लेकिन यहां

mixed table solution

मैं मूल टीडी के अंदर एक और तालिका में बड़े पाठ रखा और लेआउट के लिए कि तालिका निर्धारित किया है जाता है: तय; चौड़ाई 100%। क्या चल रहा है यह दिखाने के लिए सीमा भी जोड़ा। यह थोड़ा सा क्रॉबर है, मुझे उम्मीद है कि कोई और इसे सुधार सकता है।

Answer 5

मुझे नहीं लगता कि सीएसएस का उपयोग करके शब्द को तोड़ना संभव है। आप डेटा लाने के दौरान वर्णों की संख्या की गणना करने में सक्षम होंगे और फिर टेक्स्ट के अनुभागों के चारों ओर स्पैन टैग डालेंगे यदि यह लगातार गैर-ब्रेकिंग वर्णों की पूर्व निर्धारित संख्या से अधिक है। ब्राउज़र की डिफ़ॉल्ट प्रतिपादन पर्याप्त जगह होने पर इनलाइन लाइनों को एक-दूसरे के बगल में रखेगी, या यदि नहीं हो तो अगली पंक्ति पर तोड़ दें।

Answer 6

मेरा समाधान थोड़ा बदसूरत है। लेकिन यह वास्तव में अच्छी तरह से काम करता है। या तो जेएस या जो कुछ भी अपना एचटीएमएल उत्सर्जित कर रहा है, आप टेक्स्ट के प्रत्येक एक्स अक्षरों के बीच <wbr> डाल सकते हैं। यह ब्राउज़र को शब्दों को तोड़ने के बारे में अपना निर्णय लेने देता है, लेकिन दृष्टि से, यह तालिका स्ट्रिंग में फिट होने पर एक स्ट्रिंग के रूप में दिखाई देगा।

Answer 7

जोड़ा जा रहा है पर एक नज़र रखना "word-break: break-all;" काम करेंगे!

यह Example देखें।