假设我想在 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 渲染器尝试在某个指定位置中断,并在尝试在其中一个空格之后中断之前先执行此操作,without使用不间断空格?如果我使用不间断空格,那么它会无条件地使宽度变大。我want如果换行算法首先尝试使用逗号并且无法使行适合,则换行发生在其中一个空格之后。
我尝试将文本片段包装在<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行为是我想要的,但我似乎无法让它发挥作用。