html（+ css）：表示换行的首选位置
比方说，我有这个文本，我想要显示在一个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渲染器在某个指定位置尝试破解，并且在尝试破坏其中一个空格之前先执行该操作， 而不使用非破坏空格？ 如果我使用非破坏空间，那么无条件地增加宽度。 如果换行algorithm先用逗号先试过，并且不能使行符合，我希望在其中一个空格之后出现换行符。
我尝试在<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>
注意：它看起来像CSS3 text-wrap: avoid行为是我想要的，但我似乎无法得到它的工作。
通过使用
span.avoidwrap { display:inline-block; }
并把我想要保存在一起的文字包装起来
<span class="avoidwrap"> Text </span>
它将首先在首选块中包装，然后根据需要包装成较小的片段。
我比较喜欢Dan Mall提供的非常简洁的RWD解决scheme。 我将在这里添加它，因为关于响应行换行的一些其他问题被标记为这个的重复。
在你的情况下，你会有：
<span>Honey Nut Cheerios, <br class="rwd-break">Wheat Chex, etc.</span>
在你的媒体查询中有一行CSS：
@media screen and (min-width: 768px) { .rwd-break { display: none; } }
用上面的标记使用span { white-space:nowrap } 。 它和你所期望的一样好。
答案是否定的（ 你不能改变使用的换行algorithm ）。
但有一些解决方法 （ 最好的一个是被接受的答案 ）
你可以靠近非破坏空间 但是只能放在一起的单词之间（ 你有跨度，而不是逗号之后 ），或者你可以使用white-space:nowrap作为@Marcel提到的。
两种解决scheme都是一样的，如果不适合自己，这两种解决scheme都不会破坏一组单词。
现在我们有新的答案HTML5：
HTML5引入了<wbr>标签。 （它代表Word Break Opportunity。）
添加一个<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之外的所有主stream浏览器。
一个简单的答案是使用零宽度空格字符 ​ 它用于在特定点上的文字内部制作空格 。
与非破坏空间 相反吗 （呃，实际上是单词joiner ⁠ ）（ 单词joiner 是非破坏空间的零宽版）
（还有其他非破坏性的代码，如非 ‑ 连字符 ） （这里是关于nbsp的不同“变体”的广泛答案）
如果你想要一个纯HTML（没有CSS / JS）的解决scheme，你可以使用零宽度空间和非破坏空间的组合 ，然而，这将是非常混乱 ，编写一个人类可读的版本需要一点点努力。
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
不可读？ 这是没有评论标签的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的渲染没有完全标准化，因为这种解决scheme不使用CSS / JS ，所以对于这种使用是有好处的
另外，如果您将这与基于任何基于解决scheme的解决scheme结合使用，则可以完全控制换行algorithm
（社论说明:)
我能看到你唯一的问题是，如果你想dynamic地改变首选破损点。 这将需要对每个跨度的比例大小进行持续的JS操作，并且必须处理文本中的HTML实体。
使用<div>而不是<span> ，或者为SPAN指定一个类并为其指定display：block属性。
该™有一个HTML元素：（现在是标准化的） <wbr>元素 。
我build议你使用它。 它可能无法在任何地方工作，但这是最好的，你可以做，而不经过篮球。
