Diciamo che ho questo testo che voglio visualizzare in una cella di una tabella 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
e voglio che la riga si interrompa preferenzialmente dopo una delle virgole.
C'è un modo per dire al renderer HTML di provare a rompere in un punto designato e farlo prima di provare a rompere dopo uno degli spazi, senza utilizzare spazi unificatori? Se utilizzo spazi unificatori, aumenta la larghezza incondizionatamente. Voglio che l'interruzione di riga avvenga dopo uno degli spazi, se l'algoritmo di ritorno a capo l'ha provato prima con le virgole e non riesce a far rientrare la riga.
Ho provato a racchiudere frammenti di testo negli <span>
elementi, ma non sembra che sia utile.
<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: sembra che il comportamento CSS3text-wrap: avoid
sia quello che voglio, ma non riesco a farlo funzionare.