html (+ css): denota un lugar preferido para un salto de línea
Digamos que tengo este texto que quiero mostrar en una celda de tabla 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
y quiero que la línea se rompa preferentemente después de una de las comas.
Hay una manera de decirle al renderizador HTML que intente romper en algún lugar designado, y hacerlo primero antes de intentar romper después de uno de los espacios,si usando espacios que no se rompen? Si uso espacios que no se rompen, entonces aumenta el ancho incondicionalmente. YOquere el salto de línea que ocurre después de uno de los espacios, si el algoritmo de ajuste de línea lo ha intentado primero con las comas y no puede ajustar la línea.
ntenté envolver fragmentos de texto en<span>
elementos, pero eso no parece hacer nada útil.
<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>
note: Parece que la CSS3text-wrap: avoid
comportamiento es lo que quiero, pero parece que no puedo lograr que funcione.