[Solved -11 Answers] HTML – Word-wrap In An HTML Table - Wikitechy

PROBLEM:

• We using word-wrap: break-word to wrap text in divs and spans. However, it doesn’t seem to work in table cells. We have a table set to width:100%, with one row and two columns. Text in columns, although styled with the above word-wrap, doesn’t wrap. It causes the text to go past the bounds of the cell. This happens on Firefox, Google Chrome and Internet Explorer.
• Here’s what the source looks like:

html code td { border: 1px solid;}<table style="width: 100%;"> <tr> <td align="left"> <div style="word-wrap: break-word;">Long Content</div> </td> <td align="right"><span style="display: inline;">Short Content</span> </td> </tr></table>

“Long Content” is larger than the bounds of the page, but it doesn’t break with the above HTML. we tried the suggestions below of adding text-wrap:suppress and text-wrap:normal, but neither helped.

SOLUTION 1:

• The addition of the table-layout:fixed CSS attribute

html table td { border: 1px solid;}<table style="table-layout: fixed; width: 100%"> <tr> <td style="word-wrap: break-word">LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord </td> </tr></table> [ad type=”banner”]

SOLUTION 2:

• Try this :

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

or

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

SOLUTION 3:

• A long shot, but double-check with Firebug (or similar) that you aren’t accidentally inheriting the following rule:

html code white-space:nowrap;

• This may override your specified line break behaviour.

SOLUTION 4:

• As mentioned, putting the text within div almost works. You just have to specify the width of the div, which is fortunate static layouts.
• This works on FF 3.6, IE 8, Chrome.

html code <td> <div style="width: 442px; word-wrap: break-word"> <!-- Long Content Here--> </div></td> [ad type=”banner”]

SOLUTION 5:

• This is one of the solution :

css code * { // this works for all but td word-wrap:break-word;}table { // this somehow makes it work for td table-layout:fixed; width:100%;}

SOLUTION 6:

Try this :

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

SOLUTION 7:

• The only thing that needs to be done is add width to the <td> or the <div> inside the <td> depending on the layout you want to achieve.

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

or

html code <table style="width: 100%;" border="1"><tr> <td align="left" width="100" ><div style="word-wrap: break-word; ">looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word</div></td> <td align="right"><span style="display: inline;">Foo</span></td></tr></table> [ad type=”banner”]

SOLUTION 8:

Change your code :

css code word-wrap: break-word;

to

css code word-break:break-all;

Example

html code <table style="width: 100%;"> <tr> <td align="left"> <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 align="right"><span style="display: inline;">Short Content</span> </td> </tr></table>

SOLUTION 9:

• It appears you need to set word-wrap:break-word; on a block element (div), with specified (non relative) width.

html code <table style="width: 100%;"><tr><td align="left"><div style="display:block; word-wrap: break-word; width: 40em;">loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word</div></td><td align="right"><span style="display: inline;">Foo</span></td></tr></table> [ad type=”banner”]

• or using word-break:break-all.

SOLUTION 10:

• Normally wrapping of text happens automatically in HTML tables.But if the text contains no delimiters(like “Thisisatext” instead of “This is a Text”), word wrapping does not happens.
• Below code works even if there is no delimiters in the text.

html code <table width="700" style="table-layout:fixed" align="left"><tr><td style="word-wrap: break-word;"></td></tr></table>

SOLUTION 11:

• If you do not need a table border, apply this:

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