Denoting a preferred place for a line break(表示换行符的首选位置)
本文介绍了表示换行符的首选位置的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
假设我有一个想要显示在一个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
行为是我想要的,但我似乎无法使其工作。
推荐答案
使用
span.avoidwrap { display:inline-block; }
并将我要放在一起的文本换行
<span class="avoidwrap"> Text </span>
它将首先包装在首选块中,然后根据需要包装在更小的片段中。
这篇关于表示换行符的首选位置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
沃梦达教程
本文标题为:表示换行符的首选位置
猜你喜欢
- Fetch API 如何获取响应体? 2022-01-01
- 如何使用 JSON 格式的 jQuery AJAX 从 .cfm 页面输出查 2022-01-01
- Flexslider 箭头未正确显示 2022-01-01
- Css:将嵌套元素定位在父元素边界之外一点 2022-09-07
- addEventListener 在 IE 11 中不起作用 2022-01-01
- 400或500级别的HTTP响应 2022-01-01
- 失败的 Canvas 360 jquery 插件 2022-01-01
- Quasar 2+Apollo:错误:找不到ID为默认的Apollo客户端。如果您在组件设置之外,请使用ProvideApolloClient() 2022-01-01
- 使用RSelum从网站(报纸档案)中抓取多个网页 2022-09-06
- CSS媒体查询(最大高度)不起作用,但为什么? 2022-01-01