Word-wrap in an HTML table
css, html, html-table
Solution
The following works for me in Internet Explorer. Note the addition of the `table-layout:fixed` CSS attribute
td {
border: 1px solid;
}
<table style="table-layout: fixed; width: 100%">
<tr>
<td style="word-wrap: break-word">
Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
</td>
<td>Short word</td>
</tr>
</table>
Problem
I've been using `word-wrap: break-word` to wrap text in `div`s and `span`s. However, it doesn't seem to work in table cells. I 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: ``` 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> ``` The long word above is larger than the bounds of my page, but it doesn't break with the above HTML. I've tried the suggestions below of adding `text-wrap:suppress` and `text-wrap:normal`, but neither helped.