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

【问题标题】：Wrapping long words in a flexible html table in Firefox在 Firefox 中将长词包装在一个灵活的 html 表中
【发布时间】：2012-08-01 05:25:53
【问题描述】：

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

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

下面的code 演示了这个问题。它在 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>

【问题讨论】：

我遇到了同样的问题，并添加了“word-break:break-all;”修复。因此，如果您将此作为实际答案提交，而不仅仅是对原始问题的“更新”，我会给您的答案投票。 :)

标签： html html-table word-wrap word-break

【解决方案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;。
在<div> 样式中使用word-wrap: break-word; 和word-break:break-all;。

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

SEE DEMO

【讨论】：

A.K，谢谢您的回复。但正如我所说，这个解决方案的问题是必须修复布局。在这个例子中，这两列都是 50%，即使第一列的内容要多得多。我需要根据所有列中的实际内容调整这些百分比。