在 HTML 表格中的单词 *if required* 内打断答案

【问题标题】：Break within word *if required* in a HTML table在 HTML 表格中的单词 *if required* 内打断
【发布时间】：2018-04-12 22:07:36
【问题描述】：

我有一个固定宽度的表格（带有可变宽度的列）。如果用户输入没有空格的长条目，表格会水平扩展并且布局会中断。

我可以使用word-break: break-all 来解决这个问题，但这会在单词中间打断行，即使有合适的空格。据说，这可以通过word-wrap: break-word 解决，但不幸的是，it doesn't work as expected in tables。

以下是word-break: break-all 和word-wrap: break-word 的示例：

<table style="width: 200px; border: 1px solid black;">
    <tr>
        <td style="word-wrap: break-word">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
            incididunt ut labore et dolore magna aliqua.

            aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
        </td>
        <td>1234</td>
    </tr>
</table>

<table style="width: 200px; border: 1px solid black;">
    <tr>
        <td style="word-break: break-all">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
            incididunt ut labore et dolore magna aliqua.

            aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
        </td>
        <td>1234</td>
    </tr>
</table>

这是我想要的样子：

+-----------------------------------+
| Lorem ipsum dolor sit amet,       |
| consectetur adipiscing elit,      |
| sed do eiusmod tempor             |
| incididunt ut labore et           |
| dolore magna aliqua.         1234 |
| aaaaaaaaaaaaaaaaaaaaaaaaaaaa      |
| aaaaaaaaaaaaaaaaaaaaaaaaaaaa      |
| aaaaaaaaaaaaaaaaaaaaaa            |
+-----------------------------------+

即单词中的换行当且仅当不可能自然地打破它。

我知道table-layout: fixed 会使表格与word-wrap: break-word 一起工作，但随后列将不再是可变宽度的。我想继续使用table 而不是divs，因为数据本身是表格的。

有没有办法在 CSS 中做到这一点？

【问题讨论】：

标签： css html-table

【解决方案1】：

不是 CSS，但您可以使用 <wbr> 指定断词的位置（仅在必要时）。

<table style="width: 200px; border: 1px solid black;">
    <tr>
        <td>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
            incididunt ut labore et dolore magna aliqua.

            aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<wbr>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<wbr>aaaaaaaaaaaaaaaaaa
        </td>
        <td>1234</td>
    </tr>
</table>

【讨论】：

我怎么知道将这些放在用户输入的文本中的什么位置？
我想那是你必须事先确定的地方，这对于响应性来说不太好。
@Heinzi 实际上，更简单的方法是使用max-width