html（+ css）：表示换行符的首选位置 [英] html (+css): denoting a preferred place for a line break
问题描述
假设我想要在HTML表格单元格中显示此文本：
Honey Nut Cheerios ，Grape-Nuts，Rice Krispies，一些非常长的名字的随机谷物，蜂蜜燕麦，Wheaties，Special K，Froot Loops，Apple Jacks
并且我想让该行优先于一个逗号之后。
有一种方法可以告诉HTML渲染器尝试在某个指定位置断开，然后先尝试断开其中一个空格， em> 使用不间断的空格？如果我使用不间断的空格，那么它会使宽度无条件增大。 如果换行算法首先使用逗号尝试换行符，并且无法获得换行符，则 b
我尝试在< span> 元素中封装文本片段，但似乎没有任何帮助。
< 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>葡萄 - 坚果，< / span>
< span> Rice Krispies，< / span>
< span>一些名称很长的随机谷物，< / span>
< span>蜂蜜燕麦片，< / span>
< span> Wheaties，< / span>
< span>特殊K，< / span>
< span> Froot循环，< / span>
< span> Apple Jacks< / span>
< / td>
< td> lorem ipsum< / td>
< / tr>
< / table>
< / div>
< / body>
< / html>
注意：它看起来像 CSS3 text-wrap：avoid
通过使用
span.avoidwrap {display：inline-block; }
并包装我想要保存在
中的文本 < span class =avoidwrap>文字< / span>
它将首先包装在首选块中，然后根据需要在较小的片段中包装。
Let's say I have this text that I want to display in an HTML table cell:
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
and I want the line to break preferentially after one of the commas.
Is there a way to tell the HTML renderer to try breaking at some designated spot, and do that first before trying to break after one of the spaces, without using non-breaking spaces? If I use non-breaking spaces then it makes the width larger unconditionally. I want the line break to happen after one of the spaces, if the line-wrapping algorithm has tried it with the commas first and can't get the line to fit.
I tried wrapping text fragments in <span> elements but that doesn't seem to do anything helpful.
<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: It looks like the CSS3 text-wrap: avoid behavior is what I want, but I can't seem to get it to work.
By using
span.avoidwrap { display:inline-block; }
and wrapping the text I want to be kept together in
<span class="avoidwrap"> Text </span>
it will wrap first in preferred blocks and then in smaller fragments as needed.
这篇关于html（+ css）：表示换行符的首选位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
