极客观点
项目管理
HarmonyOS
假设我想在 HTML 表格单元格中显示以下文本：
Honey Nut Cheerios, Wheat Chex, Grape-Nuts, Rice Krispies, Some random cereal with a very long name, Honey Bunches of Oats, Wheaties, Special K, Froot Loops, Apple Jacks
我希望在其中一个逗号之后优先换行。
有没有办法告诉 HTML 渲染器尝试在某个指定位置中断，并在尝试中断其中一个空格之前首先执行此操作， 而不 使用不间断空格？ 如果我使用不间断空格，那么它会无条件地使宽度变大。我 希望 在其中一个空格之后换行，如果换行算法首先使用逗号尝试它并且无法使该行适合。
我尝试将文本片段包装在 <span> 元素中，但这似乎没有任何帮助。
<html>
<head>
<style type="text/css">
div.box { width: 180px; }
table, table td {
border: 1px solid;
border-collapse: collapse;
}
</style>
</head>
<body>
<div class="box">
<table>
<tr>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<td>lorem ipsum</td>
<td>
<span>Honey Nut Cheerios,</span>
<span>Wheat Chex,</span>
<span>Grape-Nuts,</span>
<span>Rice Krispies,</span>
<span>Some random cereal with a very long name,</span>
<span>Honey Bunches of Oats,</span>
<span>Wheaties,</span>
<span>Special K,</span>
<span>Froot Loops,</span>
<span>Apple Jacks</span>
</td>
<td>lorem ipsum</td>
</tr>
</table>
</div>
</body>
</html>
注意：看起来 CSS3 text-wrap: avoid 行为是我想要的，但我似乎无法让它工作。
原文由 Jason S 发布，翻译遵循 CC BY-SA 4.0 许可协议
通过使用
并将我想放在一起的文本包装在
它将首先包装在首选块中，然后根据需要包装在更小的片段中。