我有一个固定宽度的表格(具有可变宽度的列)。如果用户输入没有空格的长条目，表格会水平扩展并且布局会中断。
我可以使用 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 而不是 div，因为数据本身本质上是表格。
有没有办法在 CSS 中做到这一点？
最佳答案
不是 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>关于css - 在 HTML 表格中 *如果需要* 在单词内中断，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47040480/