developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr
тим, у меня есть этот текст, который я хочу отобразить в ячейке таблицы 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>
примечание: похоже наCSS3text-wrap: avoid Мне нужно поведение, но я не могу заставить его работать.