• 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.

  • 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”]

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

or

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

  • 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.

  • 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”]

  • 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%;
}

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>

  • 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”]

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>

  • 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.

  • 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>

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

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

Categorized in:

CSSHTML

Tagged in:

, , , , , , , , , , , , , , ,