Disons que j'ai ce texte que je souhaite afficher dans une cellule de tableau 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 Jackset je veux que la ligne se coupe préférentiellement après l'une des virgules.
Existe-t-il un moyen de dire au moteur de rendu HTML d'essayer de casser à un endroit désigné, et de le faire d'abord avant d'essayer de casser après l'un des espaces, sans utiliser d'espaces insécables? Si j'utilise des espaces insécables, cela augmente la largeur sans condition. Je veux que le saut de ligne se produise après l'un des espaces, si l'algorithme de retour à la ligne l'a essayé avec les virgules en premier et ne peut pas faire tenir la ligne.
J'ai essayé d'encapsuler des fragments de texte dans des <span>éléments mais cela ne semble rien d'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>Remarque: il semble que le comportement CSS3text-wrap: avoid soit ce que je veux, mais je n'arrive pas à le faire fonctionner.