word-wrap break-word does not work in this example

css, html

Solution

Mozilla Firefox solution

Add:

display: inline-block;

to the style of your `td`.

Webkit based browsers (Google Chrome, Safari, ...) solution

Add:

display: inline-block;
word-break: break-word;

to the style of your `td`.

Note: Mind that, as for now, `break-word` is not part of the standard specification for webkit; therefore, you might be interested in employing the `break-all` instead. This alternative value provides a undoubtedly drastic solution; however, it conforms to the standard.

Opera solution

Add:

display: inline-block;
word-break: break-word;

to the style of your `td`.

The previous paragraph applies to Opera in a similar way.

Problem

I cannot get word-wrap to work with this example... ``` <html> <head></head> <body> <table style="table-layout:fixed;"> <tr> <td style="word-wrap: break-word; width:100px;">ThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrap</td> </tr> </table> </body></html> ``` I remembered reading that a layout had to be specified (which I did), but beyond that I'm not sure what I have to do to get this to work. I really would like this to work in Firefox. Thanks. EDIT: Failed in Chrome 19 and Firefox 12, it works in IE8. I tried doctype strict and transitional, neither worked.

Original source