Angenommen, ich habe diesen Text, den ich in einer HTML-Tabellenzelle anzeigen möchte:
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 Jacksund ich möchte, dass die Zeile vorzugsweise nach einem der Kommas unterbrochen wird.
Gibt es eine Möglichkeit, den HTML-Renderer anzuweisen, an einer bestimmten Stelle zu brechen, und dies zuerst, bevor er versucht, nach einem der Leerzeichen zu brechen, ohne nicht brechende Leerzeichen zu verwenden? Wenn ich nicht unterbrechende Leerzeichen verwende, wird die Breite bedingungslos größer. Ich möchte, dass der Zeilenumbruch nach einem der Leerzeichen erfolgt, wenn der Zeilenumbruchalgorithmus es zuerst mit den Kommas versucht hat und die Zeile nicht passen kann.
Ich habe versucht, Textfragmente in <span>Elemente zu verpacken, aber das scheint nichts hilfreiches zu sein.
<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>Hinweis: Es sieht so aus, als ob das CSS3-text-wrap: avoid Verhalten das ist, was ich will, aber ich kann es scheinbar nicht zum Laufen bringen.