Digamos que tengo este texto que quiero mostrar en una celda de una 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 Jacksy quiero que la línea se rompa preferentemente después de una de las comas.
¿Hay alguna 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, sin usar espacios que no se rompan? Si utilizo espacios que no se rompen, el ancho aumenta incondicionalmente. Yo quiero el salto de línea que suceda después de uno de los espacios, si el algoritmo de ajuste de líneas ha intentado con las comas primero y no puede obtener la línea de ajuste.
Intenté 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>
nota: Parece que el comportamiento de CSS3text-wrap: avoid es lo que quiero, pero parece que no puedo hacer que funcione.