Supposons que je veuille afficher ce texte dans une cellule d'un 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 s'interrompe de préférence après l'une des virgules.
Existe-t-il un moyen d'indiquer au moteur de rendu HTML d'essayer de rompre à un endroit donné, et de le faire d'abord avant d'essayer de rompre après l'un des espaces, sans en utilisant des espaces insécables ? Si j'utilise des espaces insécables, la largeur est augmentée sans condition. I vouloir le saut de ligne doit avoir lieu après l'un des espaces, si l'algorithme de retour à la ligne a essayé avec les virgules d'abord et n'a pas réussi à faire tenir la ligne.
J'ai essayé d'envelopper des fragments de texte dans <span> mais cela ne semble rien apporter 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>note : Il semble que le CSS3 text-wrap: avoid est ce que je veux, mais je n'arrive pas à le faire fonctionner.
