Question

I have this DIV

<div style="width:500px;"> </div>

I’ve inserted a table inside it

<table style="width:100%;">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>

If <td></td> contained normal words, even if 100 words with spaces between them, then table will maintain its size inside the div, but if a cell contained 1 word with like 100 letters, then the table will take a bigger size outside its parent div, overflow:hidden; is good to hide the table’s enlargement, but I want the size to stay the same, and the cell to grow in height, like it usually do with normal words.

Answer 1

word-wrap is an older IE specific CSS rule. To get word wrapping in modern browsers, use white-space. Also, setting max-width seems to help get things working.

td {
  border: 1px solid black;
  width: 100px;
  max-width: 100px;
  white-space: pre-wrap; /* css-3 */
  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: -o-pre-wrap; /* Opera 7 */
  word-wrap: break-word; /* Internet Explorer 5.5+ */
}

jsFiddle DEMO