html（+css）：表示换行符的首选位置
假设我想在HTML表格单元格中显示以下文本：html（+css）：表示换行符的首选位置,html,css,word-wrap,Html,Css,Word Wrap,假设我想在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渲染器尝试在某个指定位置中断，并且在尝试在其中一个空
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>
<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>
注意：该行为似乎是我想要的，但我似乎无法使其正常工作。使用而不是，或为SPAN指定一个类，并为其指定display:block属性。使用SPAN{white space:nowrap}进行上面的标记。这真的和你想象的一样好。答案是不，你不能改变使用的换行算法 但是有一些解决办法，最好的是 你可以使用不间断的空格，但只能在单词之间使用，这些单词在跨距中是连在一起的，但不能在逗号之后，或者你可以使用空白：nowrap，正如@Marcel提到的那样
这两种解决方案的作用是相同的，如果一组单词本身不适合，它们都不会打断它。有一个HTML元素用于此™: . 我建议你用这个。它可能不起作用，但这是你在不经历困难的情况下所能做的最好的事情。使用
span.avoidwrap { display:inline-block; }
<span class="avoidwrap"> Text </span>
它将首先包装在首选块中，然后根据需要包装在更小的片段中。新答案现在我们有了HTML5： HTML5引入了标签。它代表着破口大骂的机会 添加一个字符会告诉浏览器在其他任何地方之前先在那里断开，因此很容易在逗号后使单词断开：
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解决方案。我将把它添加到这里，因为关于响应换行符的一些其他问题被标记为这个问题的副本。 在你的情况下，你会：
<span>Honey Nut Cheerios, <br class="rwd-break">Wheat Chex, etc.</span>
一个简单的答案是使用零宽度空格字符&8203；它用于在特定点的单词内部创建分隔符 与不间断空格正好相反的词，实际上是joiner&8288；word joiner是零宽度版本的不间断空格 还有其他非中断代码，如非中断连字符&8209 如果您想要一个仅HTML无CSS/JS的解决方案，您可以使用零宽度空间和非中断空间的组合，但是这将非常混乱，编写一个人类可读的版本需要一点努力 ctrl+c，ctrl+v有帮助 例如：
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
我能看到的唯一问题是，你是否想动态地更改首选破损点。这将需要对每个跨度按比例大小进行恒定的JS操作，并且必须处理文本中的HTML实体。在这种情况下，您只需调整CSS页边距中的页边距设置即可
text {
margin-right: 20%;
}
您应该使用Unicode实现的目的是提供最佳结果： 方法结果 wbr>蜂蜜坚果Cheerios、小麦Chex、葡萄和8209；坚果，脆米饼，一些名字很长的随机谷物，蜂蜜燕麦，小麦，特殊K，弗罗特圈，苹果杰克 U+200B零宽度空间蜂蜜坚果Cheerios，&8203；小麦干酪&x200b；葡萄&8209；螺母&x200b；米脆饼&x200b；一些名字很长的随机谷物，&x200b；蜂蜜燕麦串&x200b；小麦，&x200b；特殊K&x200b；弗罗特环&x200b；苹果千斤顶 U+00A0号和8209号；打破蜂蜜坚果Cheerios，小麦Chex，葡萄&8209；坚果，脆米饼，一些名字很长的随机谷物，蜂蜜燕麦，小麦，特殊K，弗罗特圈，苹果杰克
可以在跨距内使用非打断空格，但我不想使用非打断空格。我很想使用“不想在这里打破，但我会在我必须的情况下打破”的空格，但据我所知，这些空格是存在的。@Jason。。我感觉到你。。但这是不可能的。。添加了一个answer.drat，这就是计算机科学家编写渲染算法时没有排版师输入的情况。你应该接受@EggertJóhannesson的答案，因为它提供了一个很好的解决方法！谢谢，但这不起作用，因为它基本上会将跨度元素中的空间转换为，并防止空间断裂。我只是想劝阻你
渲染器不能在我的一个项目之间打断，但如果必须这样做，我希望它这样做。@Jason S:我在答案中添加了其他选项。与空格有什么不同？据我所知，选择要么是给定角色允许中断，要么不允许中断。所以“-”和“-”以及&8203；而且&害羞；都允许换行符分别在换行符上打印连字符、空格、nothing、nothing和连字符，但不允许。@Jason S:添加了示例用法。我刚刚尝试过，似乎换行符的优先级并不高于空格。优先权是我需要的。如果不同角色或元素的中断行为为是或否，则我的问题没有解决方案。如果存在相对的换行优先级，那么我可能有一个解决方案。argh.：-这太糟糕了，这意味着我要么不得不忍受它，要么我需要试着自己检测长线，试图击败断线算法。我编辑你的答案是为了提供一个到解决方法的链接，因为我几乎没有继续阅读，因为你的第一行的措辞方式。@arootbeer:我支持你的编辑，但加比又把它恢复了过来。加比：为什么？你想误导用户吗？@DanDascalescu，是否应该将所有答案更改为指向同一页面中已接受的答案？我的答案有1票赞成，48票赞成。我非常肯定，被接受的人是受到关注的人，这是正确的。除此之外，我坚持认为没有办法改变OP请求检查时使用的中断算法。我的解决方案使用您自己的逻辑来反对您。将其与任何跨度解决方案相结合，就可以完全控制换行算法-1：用于在很长的单词上标记换行点，它不能解决首选行的问题breaks@user3075942直接引用：“wbr元素代表一个换行机会。”这正是OP所要求的。不要根据你在维基上读到的内容来贬低别人。是的，机会。但浏览器已经有机会在空格处突破。问题是如何告诉浏览器在哪个空间最好断开…答案是使用。不，这不是答案。它不会增加使用特定预先存在的断点可能性的可能性；它只增加了一个新的断点可能性，而这个断点可能性并不存在。一行有两个可能性是没有任何用处的-1.你为什么在提出建议之前不进行测试？它不起作用。还有另一个目的。更不用说这个答案与很久以前存在的答案是重复的。WBR没有其他用途。只是设立了一个休息的机会；它不会“告诉浏览器在其他任何地方之前先在那里断开”。在空格之前使用，它通常是无用的，因为空格通常是换行的机会。这在任何浏览器中都不起作用。答案是错误的：没有将换行优先于普通空格。因此，在这个例子中，换行是正常的。为了澄清，这里的意思是表示一个你可以打破的地方，否则这个位置会被认为是在一个单词中。它说，把这两个角色之间的位置当作有空格一样对待，而不是在这里打断。如果已经有了空间，就没有意义了。太棒了！只需另外注意一点：内联块的开始和结束处的空格将被忽略，因此要按空格分隔块中的文本，需要将其放置在内联块之间。例如，如果跨距的样式设置为内联块，那么Helloworld将是Helloworld，Helloworld将是普通Helloworld。更具语义，在浏览器中保留控件，这通常是一件好事。在这种情况下，它可以在重要的时候打破。非常有效-在重要的时候，就像不打破一样。示例：Perikles um 500-429 v.Chr。@Lodewijk:不表示打断线的首选位置，但表示可能的位置。请注意，此技术也适用于嵌套的s，因此，您实际上可以指定首选断点的层次结构。什么是span HACK？其他答案利用了span标记。我还想指出，虽然此解决方案似乎不是最简单的，但它是最可靠的，因为这些实体不会也不应该经常在浏览器之间更改语义表示，电子邮件解析器，或任何其他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
text {
margin-right: 20%;
}