html(css):表示换行符的首选位置
假设我想在HTML表格单元格中显示以下文本:html(css):表示换行符的首选位置,html,css,word-wrap,Html,Css,Word Wrap,假设我想在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渲染器在某个指定位置尝试打断,并且在尝试在其中一个空
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渲染器在某个指定位置尝试打断,并且在尝试在其中一个空格后打断之前先打断,而不使用非打断空格?如果使用非打断空格,则会无条件地使宽度变大。我希望换行算法在其中一个空格之后发生换行,前提是换行算法先尝试使用逗号,但无法使换行匹配
我试着在
元素中包装文本片段,但似乎没有任何帮助
<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>
div.box{宽度:180px;}
表,表td{
边框:1px实心;
边界塌陷:塌陷;
}
乱数假文
乱数假文
乱数假文
乱数假文
蜂蜜坚果雪糕,
小麦糖,
葡萄仁,
米脆饼,
一些名字很长的随机谷物,
蜂蜜燕麦串,
小麦,
特别K,,
弗罗特环,
苹果千斤顶
乱数假文
注意:看起来行为就是我想要的,但我似乎无法让它工作。使用
而不是
,或者为SPAN指定一个类,并给它display:block属性。使用上面的标记使用SPAN{white space:nowrap}
。这真的是你所期望的那样好。答案是否定的(你不能改变所使用的换行算法)
但是有一些解决办法(最好的是
您可以使用不间断空格
,但只能在一起的单词之间使用(您在跨距中使用的空格,但不能在逗号之后),或者您可以使用@Marcel提到的空白:nowrap
两种解决方案都做相同的事情,如果一组单词本身不适合,它们都不会打断它。有一个HTML元素™: . 我建议你用这个。它可能不起作用,但这是你在不经历困难的情况下所能做的最好的事情。使用
span.avoidwrap { display:inline-block; }
并将我想要保存在一起的文本包装起来
<span class="avoidwrap"> Text </span>
文本
它将首先包装在首选块中,然后根据需要包装在更小的片段中。新答案现在我们有了HTML5: HTML5引入了
标记。(它代表断字机会。)
添加一个
会告诉浏览器在其他地方之前先在那里断开,因此很容易在逗号后使单词断开:
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
蜂蜜坚果Cheerios、小麦Chex、葡萄坚果、米脆饼、一些名字很长的随机谷物、蜂蜜燕麦串、麦片、特殊K、弗罗特圈、苹果杰克
除了IE之外,我的所有主要浏览器都支持它。我更喜欢一个非常简洁的RWD解决方案。我将在这里添加它,因为其他一些关于响应换行符的问题被标记为与此问题重复的问题。
在你的情况下,你会:
<span>Honey Nut Cheerios, <br class="rwd-break">Wheat Chex, etc.</span>
一个简单的答案是使用零宽度空格字符
代码>用于在特定点的单词内部创建分隔符
与不间断空格
完全相反(实际上是单词连接符;
)(单词连接符是不间断空格的零宽度版本)
(还有其他非中断代码,如非中断连字符和#8209;
)
如果您想要一个仅HTML(无CSS/JS)的解决方案,您可以使用零宽度空间和不间断空间的组合,但是这将非常混乱,编写一个人类可读的版本需要一点努力
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呈现不是完全标准化的,因此这种使用很好,因为此解决方案不使用CSS/JS
此外,如果您将其与任何基于
的解决方案结合使用,您将完全控制断线算法
(编辑注:)
我能看到的唯一问题是,你是否想动态地更改首选破损点。这将需要对每个跨度按比例大小进行恒定的JS操作,并且必须处理文本中的HTML实体。您只需调整CSS中的边距设置(在本例中为右边距)
您应该做的事情(按预期使用Unicode)提供了最佳结果:
方法结果
wbr>蜂蜜坚果Cheerios、小麦Chex、葡萄和#8209;坚果,脆米饼,一些名字很长的随机谷物,蜂蜜燕麦,小麦,特殊K,弗罗特圈,苹果杰克
U+200B零宽度空间蜂蜜坚果Cheerios和#8203;小麦支票;葡萄‑;螺母和#x200b;米脆饼;一些名字很长的随机谷物,;蜂蜜燕麦串;小麦和小麦;特殊K;弗罗特环和#x200b;苹果千斤顶
U+00A0号和#8209号;打破蜂蜜坚果Cheerios,小麦Chex,葡萄和#8209;坚果,脆米饼,一些名字很长的随机谷物,蜂蜜燕麦,小麦,特殊K,弗罗特圈,苹果杰克
可以在跨距内使用不间断空格。但我不想使用不间断空格。我很想使用“不想在这里突破,但我愿意如果我必须”的空格,但据我所知,这些空格是存在的。@Jason。。我感觉到你。。但这是不可能的。。添加了一个answer.drat,这就是计算机科学家编写渲染算法时所发生的情况,而不需要输入字体
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
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
text {
margin-right: 20%;
}