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渲染器在指定的位置尝试中断，并且先尝试在某个空格之后中断 而不
使用不间断空格？
如果我使用不间断的空格，那么它将无条件增大宽度。我 希望 换行发生在空格之一之后，如果换行算法先用逗号尝试过换行并且无法使行适合。
我尝试将文本片段包装在<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行为是我想要的，但是我似乎无法使其正常工作。
问题答案：
通过使用
span.avoidwrap { display:inline-block; }
并将要保留的文本包装在一起
<span class="avoidwrap"> Text </span>
它将首先包装在首选块中，然后根据需要包装成较小的碎片。
-
问题内容： 我怎样才能改变父母的背景的时候或者是：focus’d（或任何其他动态伪类？ 例如 问题答案： 不幸的是，css不支持父选择器。 因此，唯一的方法就是像jQuery父方法那样使用javascript 。 更新： CSS选择器第4级将支持父选择器
-
问题内容： 我可以在html选择选项中使用两行文字吗？怎么样？ 问题答案： 不，浏览器不提供此格式选项。 您可能会用一些带有s和JS的复选框来伪造它，然后用JS将其变成弹出菜单。
-
问题内容： 我想显示一个带有控件的基本html表，以切换其他列的显示/隐藏： 因此，默认情况下，列1和列2将是唯一显示的列-但是，当您单击列1时，我希望1a和1b切换，与列2和2a和2b相同。我可能最终会有更多的列和很多行- 因此，当我进行测试时，任何JavaScript循环方法都太慢而无法使用。 似乎足够快的唯一方法是设置一些CSS，如下所示： 然后在表标题单元格上设置onClick函数调用，这
-
问题内容： 过去，我一直使用下划线在HTML中定义 类 和 id 属性。在过去的几年中，我改用破折号，主要是为了使自己适应社区中的趋势，而不一定是因为这对我来说很有意义。 我一直认为破折号有更多弊端，但我看不出这样做的好处： 代码完成和编辑 大多数编辑器都将破折号视为单词分隔符，因此我无法浏览所需的符号。假设课程为“ ”，我必须自动完成“ ”，输入连字符，然后完成“ ”。 带下划线的“ ”被视为一
-
问题内容： 我了解使用CSS格式可以通过以下方式设置每个段落的首字母： 但是，使用此代码后，无法从Web浏览器中突出显示/选择这些“首字母”，有没有办法对此进行修改？ 编辑-可以选择文本，但是看不到它，如何更改呢？ 问题答案： 这是Chrome / ium / WebKit中的错误：https : //code.google.com/p/chromium/issues/detail? id =
-
对于一个项目，我需要创建一个搜索栏。搜索结果需要在一个网格中显示。这些项目应该彼此紧挨着，并且有两行高。如果有更多的结果，我需要显示一个按钮来显示所有的结果。 我面临的问题是，我不知道如何完成这一点。我使用了flexbox和flex-wrap来使新项目在下一行中显示，当它们不适合上一行时。但我不知道如何只显示前两行。 null null