Katakanlah saya memiliki teks ini yang ingin saya tampilkan dalam sel tabel 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 Jacksdan saya ingin baris tersebut putus secara istimewa setelah salah satu koma.
Adakah cara untuk memberi tahu perender HTML untuk mencoba melanggar di beberapa tempat yang ditentukan, dan melakukannya terlebih dahulu sebelum mencoba memutuskan setelah salah satu spasi, tanpa menggunakan spasi non-breaking? Jika saya menggunakan spasi non-breaking maka itu membuat lebarnya lebih besar tanpa syarat. Saya ingin jeda baris terjadi setelah salah satu spasi, jika algoritme pembungkusan baris telah mencobanya dengan koma terlebih dahulu dan tidak dapat menyesuaikan baris.
Saya mencoba membungkus fragmen teks dalam <span>elemen tetapi itu tampaknya tidak membantu.
<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>catatan: Sepertinya perilaku CSS3text-wrap: avoid adalah yang saya inginkan, tetapi saya tidak bisa membuatnya berfungsi.