html (+css)：表示换行符的首选位置
html (+css)：表示换行符的首选位置
提问于 2011-03-22 22:31:33
假设我想要在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>注意:看起来CSS3 text-wrap: avoid行为就是我想要的，但是我似乎不能让它工作。
回答 9
Stack Overflow用户
回答已采纳
发布于 2012-04-11 18:17:44
通过使用
span.avoidwrap { display:inline-block; }并包装我想要放在一起的文本
<span class="avoidwrap"> Text </span>它将首先包装在首选块中，然后根据需要包装在更小的片段中。
Stack Overflow用户
发布于 2015-05-12 19:13:16
我更喜欢Dan Mall提供的一个非常简洁的RWD解决方案。我要在这里添加它，因为其他一些关于响应性换行的问题被标记为这个问题的副本。
在您的情况下，您将拥有：
<span>Honey Nut Cheerios, <br class="rwd-break">Wheat Chex, etc.</span>和你的媒体查询中的一行CSS：
@media screen and (min-width: 768px) {
.rwd-break { display: none; }
}Stack Overflow用户
发布于 2011-03-22 22:44:09
答案是否定的(您不能更改所使用的换行算法)。
但是有一些变通方法(最好的是)
您可以使用不间断的空格 ，但只能在组合在一起的单词之间使用(跨度中的内容，但不能在逗号之后)，也可以像@Marcel提到的那样使用white-space:nowrap。
这两种解决方案都做同样的事情，并且如果一组单词不适合它自己，它们都不会。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5392853
复制相关文章
相似问题