How to prevent html table widths from enlarging due to huge one word

Question

Suppose I have a table:

<table width="100">
<tr>
<td>
hi i like you you are awesome blah blah blah no no no no
</td>
</tr>
</table>

then the table will be displayed with 100px width just fine

but then if the table becomes:

<table width="100">
<tr>
<td>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</td>
</tr>
</table>

since the content is only one word, instead of displaying it as 100px, the table's width becomes enlarged to fit the entire huge aaaa word in one line....is there a way to make the width still remain 100px in this scenario by having the huge single word overflows into multiple lines?

Answer 1

Supercalifragilisticexpialidoceous!

As said recently in another question :

You should try this CSS instruction:

td { break-word: word-wrap; }

that works in many browsers (yes, including IE 6, even IE 5.5 but not Fx 3.0. It's only recognized by Fx3.5+. Also good for Saf, Chr and Op but I don't know the exact version for these ones) and don't do any harm in the other ones.

If table's width is still messed up, there is also:

table { table-layout: fixed; }
th, td { width: some_value; }

that will force the browser to use the other table algorithm, the one where it doesn't try to adapt many situations including awkward ones but stick to what the stylesheet says.