表示换行符的首选位置

假设我有这样一个文本，我想显示在一个 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

我希望这条线在其中一个逗号之后优先断开。

有没有一种方法可以告诉 HTML 渲染器尝试在某个指定的位置进行中断，并且在尝试在某个空格 没有之后使用非中断空格进行中断之前首先进行中断？如果我使用非破坏空格，那么它会无条件地使宽度变大。如果行包装算法已经尝试过首先使用逗号，并且无法使行适合，则 想要行分隔符将发生在其中一个空格之后。

我尝试用 <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>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>

注意: 看起来 CSS3text-wrap: avoid的行为是我想要的，但我似乎不能让它工作。

39195 次浏览
小开

使用 <div>而不是 <span>，或者为 SPAN 指定一个类并赋予它 显示屏属性。

小开

用你上面的标记使用 span { white-space:nowrap }。这是你能期望的最好的。

小开

答案是否定的(不能更改所使用的分行算法)。

但是有一些解决方案 (最好的一个是接受的回答 )

您可以使用非破坏空间 &nbsp;，但是只能在连在一起的单词之间使用(你有跨度，但不是在逗号之后) ，或者您可以使用@Marcel 提到的 white-space:nowrap。

两种解决方案做同样的事情，如果 没有不适合它自己，它们都会打破一组单词。

小开

这里有一个 HTML 元素 TM: (现在标准化的) <wbr>元素。

我建议你用这个。它可能不工作 无处不在，但它是最好的，你可以不通过环。

小开
最佳答案

通过使用

span.avoidwrap { display:inline-block; }

然后包装我想要保存在里面的文本

<span class="avoidwrap"> Text </span>

它将首先包装在首选块，然后在较小的碎片需要。

小开

现在我们有了 HTML5:

HTML5引入了 <wbr>标签

添加一个 <wbr>告诉浏览器在任何地方之前在那里中断，所以很容易让单词在逗号之后中断:

Honey Nut Cheerios,<wbr> Wheat Chex,<wbr> Grape-Nuts,<wbr> Rice Krispies,<wbr> Some random cereal with a very long name,<wbr> Honey Bunches of Oats,<wbr> Wheaties,<wbr> Special K,<wbr> Froot Loops,<wbr> Apple Jacks

它支持我的所有主要浏览器除了 IE。

小开

有一个非常整洁的 RWD-从 Dan Mall的解决方案，我更喜欢。我要在这里添加它，因为一些其他的问题，关于响应换行符被标记为重复的这一个。
在你的情况下，你会:

<span>Honey Nut Cheerios, <br class="rwd-break">Wheat Chex, etc.</span>

在你的媒体查询中有一行 CSS:

@media screen and (min-width: 768px) {
.rwd-break { display: none; }
}
小开

一个简单的答案是使用 零宽空格 &#8203;它是用来制作 特定点的单词内部空格。

不换行空格 &nbsp;的 恰恰相反(实际上是 拼字游戏 &#8288;)(拼字游戏是 不换行空格的零宽版本)

(还有其他非破解代码，如 非破裂连字符 &#8209;) (这里有一个关于 < em > nbsp 的不同“变体”的详细答案)

如果你想要一个纯 HTML (没有 CSS/JS)的解决方案，你可以使用 零宽空格和 不换行空格的组合，但这将是真正的 一团糟，编写一个人类可读的版本需要一点努力。

ctrl + c，ctrl + v帮助

例如:

   Honey&nbsp;Nut&nbsp;Cheerios,<!---->&#8203;<!--
-->Wheat&nbsp;Chex,<!---->&#8203;<!--
-->Grape&#8209;Nuts,<!---->&#8203;<!--
-->Rice&nbsp;Krispies,<!---->&#8203;<!--
-->Some&nbsp;random&nbsp;cereal&nbsp;with&nbsp;a&nbsp;very&nbsp;long&nbsp;name,<!---->&#8203;<!--
-->Honey&nbsp;Bunches&nbsp;of&nbsp;Oats,<!---->&#8203;<!--
-->Wheaties,<!---->&#8203;<!--
-->Special&nbsp;K,<!---->&#8203;<!--
-->Froot&nbsp;Loops,<!---->&#8203;<!--
-->Apple&nbsp;Jacks

不可读? 这是同样的 HTML，没有注释标签:

   Honey&nbsp;Nut&nbsp;Cheerios,&#8203;Wheat&nbsp;Chex,&#8203;Grape&#8209;Nuts,&#8203;Rice&nbsp;Krispies,&#8203;Some&nbsp;random&nbsp;cereal&nbsp;with&nbsp;a&nbsp;very&nbsp;long&nbsp;name,&#8203;Honey&nbsp;Bunches&nbsp;of&nbsp;Oats,&#8203;Wheaties,&#8203;Special&nbsp;K,&#8203;Froot&nbsp;Loops,&#8203;Apple&nbsp;Jacks

然而，由于电子邮件 html 呈现并不完全标准化，因为这个解决方案使用 没有 CSS/JS，所以对于这种使用是有好处的

此外，如果您结合使用任何基于 <span>的解决方案，您将完全控制 断行算法断行算法

(社论注:)

我能看到的唯一问题是，如果你想动态更改首选破损点。这将需要对每个跨度的比例大小进行持续的 JS 操作，并且必须处理文本中的这些 HTML 实体。

小开

您可以只调整 CSS 中的边距设置(在本例中为右边距)。

text {
margin-right: 20%;
}
小开

您应该做的事情(使用 Unicode 实现它的目的)提供了最好的结果:

enter image description here

<table border="1">
<thead>
<tr><th>Method</th><th>Results</th></tr>
</thead>
<tbody>
<tr><td>&lt;wbr></td><td>Honey Nut Cheerios,<wbr> Wheat Chex,<wbr> Grape&#8209;Nuts,<wbr> Rice Krispies,<wbr> Some random cereal with a very long name,<wbr> Honey Bunches of Oats,<wbr> Wheaties,<wbr> Special K,<wbr> Froot Loops,<wbr> Apple Jacks</td></tr>
<tr><td>U+200B Zero width Space</td><td>Honey Nut Cheerios,&#8203;Wheat Chex, &#x200b;Grape&#8209;Nuts, &#x200b;Rice Krispies, &#x200b;Some random cereal with a very long name, &#x200b;Honey Bunches of Oats, &#x200b;Wheaties, &#x200b;Special K, &#x200b;Froot Loops, &#x200b;Apple Jacks</td></tr>
<tr><td>U+00A0 No&#8209;break Space</td><td>Honey&nbsp;Nut&nbsp;Cheerios, Wheat&nbsp;Chex, Grape&#8209;Nuts, Rice&nbsp;Krispies, Some&nbsp;random&nbsp;cereal&nbsp;with&nbsp;a&nbsp;very&nbsp;long&nbsp;name, Honey&nbsp;Bunches&nbsp;of&nbsp;Oats, Wheaties, Special&nbsp;K, Froot&nbsp;Loops, Apple&nbsp;Jacks</td></tr>
</tbody>
</table>


提交答案