假设我想要在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
行为就是我想要的,但是我似乎不能让它工作。
发布于 2012-04-11 18:17:44
通过使用
span.avoidwrap { display:inline-block; }
并包装我想要放在一起的文本
<span class="avoidwrap"> Text </span>
它将首先包装在首选块中,然后根据需要包装在更小的片段中。
发布于 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; }
}
发布于 2011-03-22 22:44:09
答案是否定的(您不能更改所使用的换行算法)。
但是有一些变通方法(最好的是)
您可以使用不间断的空格
,但只能在组合在一起的单词之间使用(跨度中的内容,但不能在逗号之后),也可以像@Marcel提到的那样使用white-space:nowrap
。
这两种解决方案都做同样的事情,并且如果一组单词不适合它自己,它们都不会。
https://stackoverflow.com/questions/5392853
复制相似问题