html (+css)：表示换行的首选位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5392853/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
html (+css): denoting a preferred place for a line break
提问by Jason S
Let's say I have this text that I want to display in an HTML table cell:
假设我想在 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 Hymans
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, withoutusing non-breaking spaces?If I use non-breaking spaces then it makes the width larger unconditionally. I wantthe 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.
有没有办法告诉 HTML 渲染器尝试在某个指定位置断开，然后在尝试在其中一个空格之后断开之前先执行此操作，而不使用不间断空格？如果我使用不间断空格，那么它会无条件地使宽度变大。我希望换行符发生在其中一个空格之后，如果换行算法首先使用逗号进行了尝试并且无法使该行适合。
I tried wrapping text fragments in <span>elements but that doesn't seem to do anything helpful.
我尝试将文本片段包装在<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 Hymans</span>
</td>
<td>lorem ipsum</td>
</tr>
</table>
</div>
</body>
</html>
note: It looks like the CSS3 text-wrap: avoidbehavior is what I want, but I can't seem to get it to work.
注意：看起来CSS3text-wrap: avoid行为是我想要的，但我似乎无法让它工作。
回答by Eggert Jóhannesson
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.
它将首先包装在首选块中，然后根据需要包装在较小的片段中。
回答by Stephan Weinhold
There's a very neat RWD-solution from Dan Mallthat I prefer. I'm going to add it here because some other questions regarding responsive line breaks are marked as duplicates of this one.
In your case you'd have:
我更喜欢Dan Mall提供的非常简洁的 RWD 解决方案。我将在这里添加它，因为其他一些关于响应式换行符的问题被标记为这个问题的重复。
在您的情况下，您将拥有：
<span>Honey Nut Cheerios, <br class="rwd-break">Wheat Chex, etc.</span>
And one line of CSS in you media query:
媒体查询中的一行 CSS：
@media screen and (min-width: 768px) {
.rwd-break { display: none; }
}
回答by Stephan Weinhold
An easy answer is to use the zero-width space character​It is used for making breakspaces inside words at specific points.
一个简单的答案是使用零宽度空格字符​它用于在单词内部的特定点处制作分隔符。
Does the exact oppositeof the non-breaking space (well, actually the word-joiner⁠)(word-joineris the zero-width version of non-breaking space)
是否完全相反的的非破空间 （当然，实际上是字木匠⁠）（字木匠是零宽度版本不间断空格）
(there are also other non breaking codes like the non-breaking hyphen‑)(here is an extensive answer on different 'variants' of nbsp)
（还有其他非破坏性代码，如非破坏性连字符‑）（这是对nbsp 的不同“变体”的广泛答案）
If you want an HTML-only (no CSS/JS) solution you could use a combination of the zero-width spaceand the non-breaking space, however this would be really messy, and writing a human-readable version requires a little effort.
如果你想要一个纯 HTML（没有 CSS/JS）的解决方案，你可以使用零宽度空间和不间断空间的组合，但这会非常混乱，并且编写一个人类可读的版本需要一点努力.
ctrl+ c, ctrl+ vhelps
ctrl+ c, ctrl+v帮助
example:
例子：
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 Hymans
unreadable? this is the same HTML with no comment tags:
不可读？这是没有注释标签的相同 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 Hymans
However, since email html rendering is not completely standardized, its good for that kind of use since this solution uses no CSS/JS
但是，由于电子邮件 html 渲染并未完全标准化，因此该解决方案不使用CSS/JS，因此非常适合这种用途
Also, if you use this in combination with any of the <span>-based solutions, you will have complete control of the line-breaking algorithm
此外，如果您将此与任何<span>基于 - 的解决方案结合使用，您将完全控制换行算法
(editorial note:)
（编者注：）
The only problem I could see you having is if you wanted to change the points of preferred breakage dynamically. This would require constant JS manipulation of each of the spans proportionate size, and having to handle those HTML entities in the text.
我能看到您遇到的唯一问题是，您是否想动态更改首选破损点。这将需要按比例大小对每个跨度进行持续的 JS 操作，并且必须处理文本中的这些 HTML 实体。
回答by Gabriele Petrioli
The answer is no (You cannot alter the line breaking algorithm used).
答案是否定的（您不能更改使用的换行算法）。
But there are some workarounds(best one is the accepted answer)
但是有一些解决方法（最好的方法是接受的答案）
You can go near with the non-breaking-space but only between words that go together (what you have in spans, but not after the comma), or you can use the white-space:nowrapas @Marcel mentioned.
您可以使用不间断空格， 但仅限于放在一起的单词之间（您在white-space:nowrapspan 中的内容，但不在逗号之后），或者您可以使用@Marcel 提到的 。
Both solutions do the same thing, and both will notbreak a group of words if it does not fit on its own.
两种解决方案都做同样的事情，如果它不适合自己，都不会破坏一组单词。
回答by Marcel
With your mark-up above use span { white-space:nowrap }. It's as good as you can expect really.
使用上面的标记使用span { white-space:nowrap }. 它真的和你所期望的一样好。
回答by ACarter
New answer now we have HTML5:
现在我们有了 HTML5 的新答案：
HTML5 introduces the <wbr>tag. (It stands for Word Break Opportunity.)
HTML5 引入了<wbr>标签。（它代表 Word Break Opportunity。）
Adding a <wbr>tells the browser to break there before anywhere else, so it's easy to make words break after commas:
添加 a<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 Hymans
It is supported my all major browsers apart from IE.
除了 IE 之外，我的所有主要浏览器都支持它。
回答by gooflord
You can just adjust the margin settings in CSS (margin-right in this case).
您可以在 CSS 中调整边距设置（在这种情况下为边距）。
text {
margin-right: 20%;
}
回答by justacoder
Use <div>instead of <span>, or specify a class for SPAN and give it the display:blockattribute.
使用<div>代替<span>，或为 SPAN 指定一个类并为其指定display:block属性。
回答by Mathias Bynens
There's an HTML element for that?: the (now standardized) <wbr>element.
有一个 HTML 元素吗？：（现在标准化的）<wbr>element。
I'd advise you to use that. It may not work everywhere, but it's the best you can do without going through hoops.
我建议你用那个。它可能并不适用于任何地方，但它是您无需通过箍就能做到的最好的方法。
