Giả sử tôi có văn bản này mà tôi muốn hiển thị trong một ô bảng 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 Jacksvà tôi muốn dòng được ưu tiên ngắt sau một trong các dấu phẩy.
Có cách nào để yêu cầu trình kết xuất HTML thử ngắt tại một số điểm được chỉ định và làm điều đó trước khi cố gắng ngắt sau một trong các khoảng trắng mà không sử dụng các khoảng trắng không ngắt? Nếu tôi sử dụng khoảng trắng không ngắt thì nó làm cho chiều rộng lớn hơn vô điều kiện. Tôi muốn ngắt dòng xảy ra sau một trong các khoảng trắng, nếu thuật toán gói dòng đã thử nó với dấu phẩy trước và không thể làm cho dòng vừa khít.
Tôi đã thử gói các đoạn văn bản trong <span>các phần tử nhưng điều đó dường như không làm được gì hữu ích.
<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>lưu ý: Có vẻ như hành vi CSS3text-wrap: avoid là những gì tôi muốn, nhưng tôi dường như không thể làm cho nó hoạt động.