एचटीएमएल टेबल में वर्ड-रैप

Question

मैं एस और एस word-wrap: break-wordमें पाठ लपेटने के लिए उपयोग कर रहा हूँ । हालांकि, यह तालिका सेल में काम करने के लिए प्रतीत नहीं होता। मेरे पास एक तालिका है , जिसमें एक पंक्ति और दो कॉलम हैं। स्तंभों में पाठ, हालांकि ऊपर से स्टाइल किया गया है , लिपटे नहीं। यह पाठ को सेल की सीमा से आगे जाने का कारण बनता है। यह फ़ायरफ़ॉक्स, गूगल क्रोम और इंटरनेट एक्सप्लोरर पर होता है।divspanwidth:100%word-wrap

यहाँ स्रोत कैसा दिखता है:

td {
  border: 1px solid;
}

<table style="width: 100%;">
  <tr>
    <td>
      <div style="word-wrap: break-word;">
        Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
      </div>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>

ऊपर दिया गया लंबा शब्द मेरे पृष्ठ की सीमा से बड़ा है, लेकिन यह उपरोक्त HTML से नहीं टूटता। मैं जोड़ने के लिए नीचे दिए गए सुझावों को आज़मा चुके text-wrap:suppressऔर text-wrap:normal, लेकिन न तो मदद की।

Comments

हार्ड-हाइफ़न जोड़ें। <tr> <td style = "text-लपेट: सामान्य; शब्द-लपेट: विराम-शब्द"> यह एक पूर्व-संस्कार है। </ td> </ tr>

— adatapost

दुर्भाग्य से, वहाँ का पाठ उपयोगकर्ता-जनित सामग्री से आता है। बेशक, मैं इसे पूर्व-प्रक्रिया कर सकता हूं और हाइफ़न जोड़ सकता हूं, लेकिन मुझे उम्मीद थी कि एक बेहतर तरीका होगा।

— सायकोटिक

मैं 'हार्ड-हाइफ़न' शब्द का उपयोग करने के लिए माफी माँगता हूँ। HTML में, सादे हाइफ़न को "-" वर्ण (& # 45; या & # x2D) द्वारा दर्शाया गया है। नरम हाइफ़न को चरित्र इकाई संदर्भ और शर्मीली द्वारा दर्शाया गया है; (& # 173; या & # xAD;)

— adatapost

क्या तुम सच में <code> तोड़ने wor <em> कश्मीर </ em> </ code> का उपयोग कर रहे हैं? शायद इससे कुछ हो सकता है।

— Ms2ger

तुम यहाँ हो, तो आप भी को देखने के लिए चाहते हो सकता है white-space: pre-wrap developer.mozilla.org/en-US/docs/Web/CSS/white-space

— टॉम Prats

Answer 1

निम्नलिखित मेरे लिए इंटरनेट एक्सप्लोरर में काम करता है। table-layout:fixedसीएसएस विशेषता के अलावा पर ध्यान दें

td {
  border: 1px solid;
}

<table style="table-layout: fixed; width: 100%">
  <tr>
    <td style="word-wrap: break-word">
      LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
    </td>
  </tr>
</table>

Comments

@ewomac हाँ, कभी-कभी मुझे बस HTML / CSS के बारे में VS2010 त्रुटियों को अनदेखा करना पड़ता है अगर मुझे पता है कि यह ब्राउज़र में काम करेगा।

— मार्क स्ट्रोब

@marc !! यार, इसके लिए बहुत बहुत धन्यवाद। मुझे एक क्लाइंट साइट का एक मोबाइल संस्करण बनाने का काम सौंपा गया था जो तालिकाओं का उपयोग करता है, और मुझे यह काम करने में परेशानी हो रही थी! टेबल-लेआउट: तय किया चाल!

— डिबग करें

यह अन्य स्तंभों को बहुत अधिक विस्तृत बनाता है।

— क्लेमेंट

डेवलपर को अवश्य पढ़ें । बाद की पंक्तियों में सेल स्तंभ की चौड़ाई को प्रभावित नहीं करते हैं। ध्वनि की तरह इस प्रदर्शन के लिए भी अच्छा है।

— सैम Barnum

@ क्लेमेंट इंड्रेक के जवाब के बारे में नीचे देखते हैं <colgroup>, इसने मेरे लिए यह तय किया।

— andttweber

Answer 2

<td style="word-break:break-all;">longtextwithoutspace</td>

या

<span style="word-break:break-all;">longtextwithoutspace</span>

Comments

यह पुष्टि कर सकता है कि प्रतीक का दृष्टिकोण आईओएस (आईफोन) पर सफारी पर भी काम करता है।

— occulus

कुछ छोटे और कुछ लंबे शब्दों के साथ समस्या के आसपास काम करने के लिए, आप संभावित रूप से पाठ को प्रीप्रोसेस कर सकते हैं और केवल लंबे शब्दों (जैसे, 40 वर्ण) में लपेट सकते हैं <span>।

— नूरगंज

यह फ़ायरफ़ॉक्स, ओपेरा

— meotimdihia

यह गैर-शब्द वर्णों पर अधिमानतः नहीं टूटता था (जैसे, अगर मेरे पास रिक्त स्थान द्वारा अलग किए गए छोटे शब्दों की एक श्रृंखला होती है, तो यह हमेशा शब्दों को लाइन तक चलाएगा, फिर अंतिम शब्द को आधे में तोड़ देगा)। Word-wrapआवश्यक होने पर ही शब्दों को तोड़ेंगे

— हाशबोर्न

यह दृष्टिकोण बेहतर है क्योंकि इसकी आवश्यकता नहीं है table-layout: fixed;।

— चालाकी

Answer 3

एक लंबा शॉट, लेकिन फायरबग (या समान) के साथ डबल-चेक करें कि आप गलती से निम्नलिखित नियम को प्राप्त नहीं कर रहे हैं:

white-space:nowrap;

यह आपके निर्दिष्ट लाइन ब्रेक व्यवहार को ओवरराइड कर सकता है।

Comments

यह वही है जो मुझे विरासत में मिला था और मेरे लिए रैपिंग शब्द को तोड़ दिया था

— shan lee

@RickGrundy यदि आपके पास यह मुद्दा है तो आप इसे क्या बदलते हैं?

— cakedude

@ मुझे बहुत देर हो चुकी है, लेकिन यह हैwhite-space:normal;

— बीयर

Answer 4

यह करने का कोई अच्छा तरीका नहीं है। निकटतम मैं आया था "अतिप्रवाह: छिपा हुआ;" मेज के चारों ओर div और पाठ को खोने के लिए। असली समाधान करने के लिए तालिका खाई हालांकि लगता है। डिव्स और रिलेटिव पोजिशनिंग का उपयोग करके मैं उसी प्रभाव को प्राप्त करने में सक्षम था, जिसकी विरासत को घटाकर<table>

2015 अद्यतन: यह मेरे जैसे लोगों के लिए है जो यह उत्तर चाहते हैं। 6 साल के बाद, यह काम करता है, सभी योगदानकर्ताओं का धन्यवाद।

* { // this works for all but td
  word-wrap:break-word;
}

table { // this somehow makes it work for td
  table-layout:fixed;
  width:100%;
}

Answer 5

जैसा कि उल्लेख किया गया है, divलगभग कार्यों के भीतर पाठ डालना । आपको बस इसके बारे में बताना widthहोगाdiv जो लेआउट जो स्थिर रहे हैं के लिए भाग्यशाली है।

यह FF 3.6, IE 8, क्रोम पर काम करता है।

<td>
  <div style="width: 442px; word-wrap: break-word">
    <!-- Long Content Here-->
  </div>
</td>

Comments

आप पूरे सेल को सुनिश्चित करने के लिए min-width: 100%साथ जोड़ सकते हैं । widthdiv

— user1091949

मैं अल्पविराम (,) के साथ वर्ड रैप करना चाहता हूं। की तरह Long,Long,Long,Long,Long। मैं किसी भी अल्पविराम (,) के बाद इसे लपेटना चाहता हूं।

— कार्तिकेयन

Answer 6

वर्कफ़्लो जो अतिप्रवाह-रैप का उपयोग करता है और सामान्य तालिका लेआउट + तालिका चौड़ाई 100% के साथ ठीक काम करता है

https://jsfiddle.net/krf0v6pw/

एचटीएमएल

<table>
  <tr>
    <td class="overflow-wrap-hack">
      <div class="content">
        wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
      </div>
    </td>
  </tr>
</table>

सीएसएस

.content{
  word-wrap:break-word; /*old browsers*/
  overflow-wrap:break-word;
}

table{
  width:100%; /*must be set (to any value)*/
}

.overflow-wrap-hack{
  max-width:1px;
}

लाभ:

• के overflow-wrap:break-wordबजाय का उपयोग करता हैword-break:break-all । जो बेहतर है क्योंकि यह पहले रिक्त स्थान पर तोड़ने की कोशिश करता है, और शब्द को केवल तभी काट देता है जब शब्द कंटेनर से बड़ा हो।
• कोई table-layout:fixedजरूरत नहीं । अपने नियमित ऑटो-आकार का उपयोग करें।
• पिक्सल में फिक्स्ड widthया फिक्स्ड को परिभाषित करने की आवश्यकता नहीं है max-width। %जरूरत पड़ने पर माता-पिता को परिभाषित करें ।

FF57, Chrome62, IE11, Safari11 में परीक्षण किया गया

Comments

हालांकि यह हैक वास्तव में सभी ब्राउज़रों में काम करता है, सावधान रहें कि सीएसएस कल्पना इसकी कोई गारंटी नहीं देती है। प्रति w3.org/TR/CSS21/visudet.html#propdef-max-width , "टेबल, इनलाइन टेबल, टेबल सेल, टेबल कॉलम और कॉलम समूहों पर 'न्यूनतम-चौड़ाई' और 'अधिकतम-चौड़ाई' का प्रभाव अपरिभाषित ” ।

— मार्क अमेरी

Answer 7

अपना कोड बदलें

word-wrap: break-word;

सेवा

word-break:break-all;

उदाहरण

<table style="width: 100%;">
  <tr>
    <td>
      <div style="word-break:break-all;">longtextwithoutspacelongtextwithoutspace Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content</div>
    </td>
    <td><span style="display: inline;">Short Content</span>
    </td>
  </tr>
</table>

Comments

-1; यह ब्राउज़र को शब्दों के बीच में वर्ड ब्रेक और ब्रेक को पूरी तरह से अनदेखा कर देता है, भले ही इसके लिए आवश्यकता न हो। यह शायद ही वांछनीय व्यवहार है और संभवतः ऐसा व्यवहार नहीं है जिसे ओपी चाहता था, या अन्यथा वे break-wordपहले स्थान पर उपयोग नहीं कर रहे थे ।

— मार्क अमेरी

Answer 8

समस्या यह है

<td style="word-break:break-all;">longtextwithoutspace</td>

यह है कि यह बहुत अच्छा काम नहीं करेगा जब पाठ में कुछ रिक्त स्थान हों, जैसे

<td style="word-break:break-all;">long text with andthenlongerwithoutspaces</td>

यदि शब्द andthenlongerwithoutspacesएक पंक्ति में टेबल सेल में फिट बैठता है long text with andthenlongerwithoutspaces, लेकिन ऐसा नहीं है, तो लंबे शब्द को लिपटे होने के बजाय दो में तोड़ा जाएगा।

वैकल्पिक समाधान: डालने U + 200B ( ZWSP ), U + 00AD ( नरम हाइफन ) या यू 200 सी ( जेडडब्ल्यूएनजे हर लंबा शब्द में) हर, कहते हैं, 20 वीं चरित्र के बाद (हालांकि, नीचे चेतावनी देखें):

td {
  border: 1px solid;
}

<table style="width: 100%;">
  <tr>
    <td>
      <div style="word-wrap: break-word;">
        Looooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooong word
      </div>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>

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

चेतावनी : अतिरिक्त वर्ण सम्मिलित करते समय, आपको ग्रेफ़े के भीतर कई कोड बिंदुओं को अलग नहीं करना चाहिए। अधिक जानकारी के लिए https://unicode.org/reports/tr29/#Grapheme_Cluster_Boundaries देखें ।

Comments

शायद इस से आउटपुट थोड़ा बेहतर है अगर, पर्याप्त रूप से लंबे शब्दों में, आप हर वर्ण के बाद एक नरम हाइफ़न डालें , ताकि ब्राउज़र मज़बूती से शब्द को तत्व के दाहिने किनारे पर तोड़ सके।

— मार्क अमेरी

हालांकि यह एक व्यवहार्य समाधान है, कुछ जोड़ने के लिए उचित सहज ज्ञान युक्त सुझाव ", हर के बाद, 20 वें चरित्र" को जाल से भरा हुआ है यदि आप इसे अपने सर्वर पर प्रोग्रामेटिक रूप से करना चाहते हैं। अधिकांश प्रोग्रामिंग भाषाओं में एक यूनिकोड स्ट्रिंग के वर्णों में परिवर्तन कठिन है। सबसे अच्छा , एक भाषा यूनिकोड कोड बिंदुओं पर पुनरावृति करना आसान बना सकती है, लेकिन जरूरी नहीं कि हम "वर्ण" के रूप में संदर्भित करना चाहते हैं (जैसे éदो कोड बिंदुओं के रूप में लिखा जा सकता है)। हम शायद वास्तव में "अंगूर" का मतलब है, लेकिन मैं किसी भी भाषा को नहीं जानता जो इसे उन लोगों के लिए तुच्छ बनाता है।

— मार्क अमेरी

@ मार्की आप सही कह रहे हैं। हालाँकि, सादे ASCII के साथ भी यह बढ़िया नहीं है। मैंने "चेतावनियाँ" जोड़ीं।

— पिओत्र फाइंडसेन

Answer 9

की जाँच करें इस डेमो

   <table style="width: 100%;">
    <tr>
        <td><div style="word-break:break-all;">LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord</div>
        </td>
        <td>
            <span style="display: inline;">Foo</span>
        </td>
    </tr>
</table>

यहाँ पढ़ने के लिए लिंक है

Comments

-1; उपयोग break-allकरने से ब्राउज़र को शब्द ब्रेक को पूरी तरह से नजरअंदाज करने का कारण होगा, जहां यह तय करना है कि लाइन ब्रेक कहां लगाना है, भले ही आपके सेल में बिना किसी बहुत लंबे शब्दों के सामान्य गद्य हो, आप शब्दों के बीच में लाइन ब्रेक के साथ समाप्त हो जाएंगे। यह आमतौर पर अवांछनीय है।

— मार्क अमेरी

Answer 10

IE 8 और क्रोम 13 में परीक्षण किया गया।

<table style="table-layout: fixed; width: 100%">
    <tr>
        <td>
              <div style="word-wrap: break-word;">
                 longtexthere
              </div>
        </td>
        <td><span style="display: inline;">Foo</span></td>
    </tr>
</table>

इसके कारण तालिका पृष्ठ की चौड़ाई और प्रत्येक स्तंभ को चौड़ाई का 50% तक फिट करने का कारण बनती है।

आप पृष्ठ के अधिक लेने के लिए प्रथम स्तंभ पसंद करते हैं, एक को जोड़ने width: 80%के लिए tdनिम्न उदाहरण में, अपनी पसंद का प्रतिशत के साथ 80% की जगह।

<table style="table-layout: fixed; width: 100%">
    <tr>
        <td style="width:80%">
               <div style="word-wrap: break-word;">
                 longtexthere
               </div>
            </td>
        <td><span style="display: inline;">Foo</span></td>
    </tr>
</table>

Answer 11

केवल एक चीज जो करने की ज़रूरत है वह उस लेआउट के आधार पर <td>या उसके <div>अंदर की चौड़ाई जोड़ना है जिसे <td>आप प्राप्त करना चाहते हैं।

उदाहरण के लिए:

<table style="width: 100%;" border="1"><tr>
<td><div style="word-wrap: break-word; width: 100px;">looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word</div></td>
<td><span style="display: inline;">Foo</span></td>
</tr></table>

या

 <table style="width: 100%;" border="1"><tr>
    <td width="100" ><div style="word-wrap: break-word; ">looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word</div></td>
    <td><span style="display: inline;">Foo</span></td>

</tr></table>

Comments

यह मूल रूप से केवल वही दोहराता है जो किसी भी नई जानकारी या अंतर्दृष्टि को जोड़े बिना loungerdork का जवाब पहले ही महीनों पहले कह चुका है।

— मार्क अमेरी

इसके लिए मेरे लिए काम किया

— core114

Answer 12

इनाम जीतने वाला उत्तर सही है, लेकिन यह काम नहीं करता है यदि तालिका की पहली पंक्ति में एक मर्ज / शामिल सेल है (सभी कोशिकाओं को समान चौड़ाई मिलती है)।

इस मामले में आप का उपयोग करना चाहिए colgroupऔर colवह ठीक से प्रदर्शित करने के लिए टैग:

<table style="table-layout: fixed; width: 200px">
<colgroup>
    <col style="width: 30%;">
    <col style="width: 70%;">
</colgroup>
<tr>
    <td colspan="2">Merged cell</td>
</tr>
<tr>
    <td style="word-wrap: break-word">VeryLongWordInThisCell</td>
    <td style="word-wrap: break-word">Cell 2</td>
</tr>
</table>

Answer 13

<p style="overflow:hidden; width:200px; word-wrap:break-word;">longtexthere<p>

Comments

-1 किसी भी स्पष्टीकरण की कमी और खराब समाधान दोनों के लिए। pटेबल-सेल के भीतर एक निश्चित पिक्सेल-चौड़ाई वाली सामग्री को डालना, जिसमें एक निश्चित पिक्सेल चौड़ाई नहीं है, निश्चित रूप pसे तालिका सेल को भरने के लिए या तो अतिप्रवाह या असफलता के साथ समाप्त हो जाएगी ।

— मार्क अमेरी

Answer 14

ऐसा प्रतीत होता है कि आपको निर्दिष्ट (गैर सापेक्ष) चौड़ाई के साथ word-wrap:break-word;एक ब्लॉक तत्व ( div) पर सेट करने की आवश्यकता है । उदाहरण के लिए:

<table style="width: 100%;"><tr>
    <td><div style="display:block; word-wrap: break-word; width: 40em;">loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word</div></td>
    <td><span style="display: inline;">Foo</span></td>
</tr></table>

या word-break:break-allअभिषेक साइमन के सुझाव के अनुसार।

Answer 15

यह मेरे लिए काम करता है:

<style type="text/css">
    td {

        /* CSS 3 */
        white-space: -o-pre-wrap;
        word-wrap: break-word;
        white-space: pre-wrap;
        white-space: -moz-pre-wrap;
        white-space: -pre-wrap;
    }

और तालिका विशेषता है:

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

</style>

Comments

कई अन्य उत्तरों की तरह, यहाँ पर जो कुंजी बिट काम करता है वह उपयोग कर रहा है table-layout: fixed, लेकिन पहले से ही एक बहुत पुराना उत्तर है जो सुझाव दे रहा है, इसलिए यह उत्तर कोई नई जानकारी नहीं जोड़ता है।

— मार्क अमेरी

Answer 16

यदि आपको टेबल बॉर्डर की आवश्यकता नहीं है, तो इसे लागू करें:

table{
    table-layout:fixed;
    border-collapse:collapse;
}
td{
    word-wrap: break-word;
}

Comments

पहले से ही उपयोग करने का सुझाव देने वाला एक बहुत पुराना उत्तर हैtable-layout: fixed ; यह पृष्ठ में कुछ भी नया नहीं जोड़ता है।

— मार्क अमेरी

Answer 17

मुझे एक समाधान मिला जो फ़ायरफ़ॉक्स, Google क्रोम और इंटरनेट एक्सप्लोरर 7-9 में काम करता है। एक तरफ लंबे पाठ के साथ दो-स्तंभ तालिका लेआउट करने के लिए। मैंने सभी को समान समस्या के लिए खोजा, और एक ब्राउज़र में काम करने वाले ने दूसरे को तोड़ दिया, या एक टेबल पर अधिक टैग जोड़ना सिर्फ खराब कोडिंग जैसा लगता है।

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

और कुछ सामान्य स्टाइल।

    dl {
        margin-bottom:50px;
    }

    dl dt {
        background:#ccc;
        color:#fff;
        float:left;
        font-weight:bold;
        margin-right:10px;
        padding:5px;
        width:100px;
    }

    dl dd {
        margin:2px 0;
        padding:5px 0;
        word-wrap:break-word;
        margin-left:120px;
    }

<dl>
    <dt>test1</dt>
    <dd>Fusce ultricies mi nec orci tempor sit amet</dd>
    <dt>test2</dt>
    <dd>Fusce ultricies</dd>
    <dt>longest</dt>
    <dd>
        Loremipsumdolorsitametconsecteturadipingemipsumdolorsitametconsecteturaelit.Nulla
        laoreet ante et turpis vulputate condimentum. In in elit nisl. Fusce ultricies
        mi nec orci tempor sit amet luctus dui convallis. Fusce viverra rutrum ipsum,
        in sagittis eros elementum eget. Class aptent taciti sociosqu ad litora
        torquent per conubia nostra, per.
    </dd>
</dl>

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

मैंने टेबल सेल में वर्ड-रैप का उपयोग करने की कोशिश की, लेकिन यह केवल इंटरनेट एक्सप्लोरर 9, (और फ़ायरफ़ॉक्स और गूगल क्रोम के पाठ्यक्रम) में काम करता था, मुख्य रूप से यहां टूटे हुए इंटरनेट एक्सप्लोरर ब्राउज़र को ठीक करने की कोशिश कर रहा था।

Answer 18

तालिकाएँ डिफ़ॉल्ट रूप से लपेटी जाती हैं, इसलिए सुनिश्चित करें कि तालिका कोशिकाएँ हैं table-cell:

td {
   display: table-cell;
}

Comments

-1; किसी भी HTML तत्व में पाठ डिफ़ॉल्ट रूप से लपेटता है, न कि केवल तालिकाओं में। यहाँ सुझाव वास्तव में कोई मतलब नहीं है।

— मार्क अमेरी

Answer 19

शैली = "तालिका-लेआउट: निश्चित; चौड़ाई: 98%; शब्द-लपेट: तोड़-शब्द"

<table bgcolor="white" id="dis" style="table-layout:fixed; width:98%; word-wrap:break-word" border="0" cellpadding="5" cellspacing="0" bordercolordark="white" bordercolorlight="white" >

डेमो - http://jsfiddle.net/Ne4BR/749/

यह मेरे लिए बहुत अच्छा काम किया। मेरे पास लंबे लिंक थे जिससे वेब ब्राउज़र पर तालिका 100% से अधिक हो जाएगी। IE, Chrome, Android और Safari पर परीक्षण किया गया।

Comments

यह मूल रूप से शीर्ष-मतदान जवाब के रूप में एक डुप्लिकेट है ; दोनों मामलों में समाधान "उपयोग table-layout: fixed" करने के लिए उबलता है ।

— मार्क अमेरी

Answer 20

एक समाधान जो Google क्रोम और फ़ायरफ़ॉक्स के साथ काम करता है (इंटरनेट एक्सप्लोरर के साथ परीक्षण नहीं किया गया है) display: table-cellएक ब्लॉक तत्व के रूप में सेट करना है।

Answer 21

आप यह कोशिश कर सकते हैं अगर यह आपको सूट करता है ...

अपने td के अंदर एक textarea रखो और इसे पृष्ठभूमि रंग सफेद के साथ अक्षम करें और इसकी पंक्तियों की संख्या को परिभाषित करें।

<table style="width: 100%;">
  <tr>
    <td>
        <textarea rows="4" style="background-color:white;border: none;" disabled>      Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
      </textarea>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>