Wrapping long words in a flexible html table in Firefox

Question

I have a table with two columns. There is a very long word in the first column. I want to have the long word wrapped.

You might have noticed this is the same issue as Word-wrap in an HTML table. The chosen answer in that thread is to add 'table-layout:fixed', which means the column widths have to be fixed. But I need the table to stay flexible so that the second column only use enough width for its content when the content in the first column is too long to fit in one line.

Below code demonstrates the issue. It works well in IE/Chrome. But in FireFox, the line is not wrapped.

Has anyone got any ideas to work around this issue in FireFox?

Update: I just tested it in FireFox 15 Beta released 9 days before. The "word-break" is now supported by Firefox 15. But I might still need a workaround for previous versions, because it might take a while for 15 to be released and become majority.

<table style="width: 100%;">
    <tr>
        <td><div style="word-break:break-all;">LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord</div>
        </td>
        <td>
            <a href='#' style="white-space:nowrap;">Action</a>
        </td>
    </tr>
</table>

Answer 1

Some changes in your markup, See below code:

<table style="width: 100%; table-layout:fixed;">
    <tr>
        <td>
            <div style="word-break:break-all; word-wrap: break-word;">LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord</div>
        </td>
        <td>
            <a href='#' style="white-space:nowrap;">Action</a>
        </td>
    </tr>
</table>

• Add table-layout:fixed; in table styles.
• Use word-wrap: break-word; with word-break:break-all; in <div> style.

It will work on all major browsers IE, FF, Safari and Chrome.

SEE DEMO