html - 在 Firefox 中将长词包装在一个灵活的 html 表中

Question

我有一个有两列的表。第一栏有一个很长的词。我想把长字包起来。

您可能已经注意到这与HTML table 中的 Word-wrap相同。该线程中选择的答案是添加“table-layout：fixed”，这意味着必须固定列宽。但是我需要表格保持灵活，以便第二列仅在第一列中的内容太长而无法容纳一行时为其内容使用足够的宽度。

下面的代码演示了这个问题。它在 IE/Chrome 中运行良好。但在 Firefox 中，该行没有换行。

有没有人有任何想法可以在 FireFox 中解决这个问题？

更新：我刚刚在 9 天前发布的 FireFox 15 Beta 中对其进行了测试。Firefox 15 现在支持“断词”。但我可能仍需要对以前的版本进行解决，因为 15 可能需要一段时间才能发布并成为多数。

<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

标记中的一些更改，请参见以下代码：

<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>

• 添加table-layout:fixed;表格样式。
• word-wrap: break-word;与风格搭配使用word-break:break-all;。<div>

它适用于所有主流浏览器 IE、FF、Safari 和 Chrome。

看演示