Powiedzmy, że mam ten tekst, który chcę wyświetlić w komórce tabeli 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
i chcę, aby wiersz był preferencyjnie przerywany po jednym z przecinków.
Czy istnieje sposób, aby powiedzieć modułowi renderującemu HTML, aby spróbował złamać w jakimś wyznaczonym miejscu i zrobić to najpierw przed próbą przerwania po jednej ze spacji, bez używania nierozdzielających spacji? Jeśli używam nierozdzielających spacji, bezwarunkowo zwiększa to szerokość. Chcę, aby podział wiersza następował po jednej ze spacji, jeśli algorytm zawijania wierszy wypróbował go najpierw z przecinkami i nie może dopasować wiersza.
Próbowałem zawijać fragmenty tekstu w <span>
elementy, ale to nie wydaje się pomagać.
<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>
uwaga: Wygląda na to, że zachowanie CSS3text-wrap: avoid
jest tym, czego chcę, ale nie mogę go zmusić do działania.