Question

我有一个有两列的表。第一栏中有一个很长的词。我想把长话包好。

您可能已经注意到这与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>

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。

在Firefox中灵活的html表中包装长单词

1 个答案:

SEE DEMO