这篇文章发布于 2018年09月1日,星期六,21:43,归类于 HTML相关。 阅读 33019 次, 今日 2 次 13 条评论
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=7988
本文可全文转载,但需得到原作者书面许可,同时保留原作者和出处,摘要引流则随意。
一、连续英文换行的问题
在web网页中,连续英文单词默认是不换行的,例如下面的测试代码:
<div style="width:150px; background:#cd0000;"> CanvasRenderingContext2D.globalCompositeOperation </div>
实时效果如下(若无效果,可访问原文):
可以看到,英文字符直接飞到了<div>
元素之外(红色背景之外)。
我们通常做法是使用word-break:break-all
或者word-wrap:break-word
(这两个声明区别可以参见这篇文章)。
例如:
<div style="width:150px; background:#cd0000; word-break:break-all;"> CanvasRenderingContext2D.globalCompositeOperation </div>
实时效果如下,可以看到英文单词换行了:
但是,会有一个很明显的问题,这换行的位置把英文单词直接破开了,可读性下降明显。
有没有什么方法,技能换行,又不破坏单词呢?
使用word-wrap:break-word
可不可以呢?在这里是不行的,因为所有字符都是紧密相连,其中没有标准空格,无法区分到底哪个是单词,word-wrap:break-word
就无法大展拳脚,效果就和word-break:break-all
表现一致:
<div style="width:150px; background:#cd0000; word-wrap:break-word;"> CanvasRenderingContext2D.globalCompositeOperation </div>
实时效果如下:
此时,CSS不行,HTML可以出马了,HTML中有个<wbr>
元素标签,可以实现英文单词的精准换行。
二、wbr与英文换行
我们先看效果吧,HTML代码如下:
<div style="width:150px; background:#cd0000;"> Canvas<wbr>Rendering<wbr>Context2D<wbr>.global<wbr>Composite<wbr>Operation </div>
也就是把<wbr>
标签写在单词连接处,于是,神奇的事情发生了:
单词分隔的地方,全部都是写入了<wbr>
标签的地方,这就是<wbr>
标签的神奇之处,宽度不够,在我这里换行;宽度足够,还是一行显示,非常智能,如下GIF截图效果:
眼见为实,您可以狠狠地点击这里:<wbr> HTML标签功能演示demo
IE浏览器的兼容处理
如果只是单纯写入<wbr>
标签,在IE浏览器下,至少windows 7系统下,都是无效的,所有字符还是一行显示,Chrome,Firefox等浏览器表现都是符合预期的。
好在有简单的方法使IE浏览器也兼容<wbr>
特性,就是加个如下CSS片段:
wbr:after { content: '\00200B'; }
U+200B是一个0宽空格,可以看成是和<wbr>
标签功能对应的字符产物,因此,我们也可以直接在HTML中使用​
代替<wbr>
,不过语义不太好,建议还是使用<wbr>
。
三、wbr与br换行的区别
<wbr>
元素有个近亲叫做<br>
元素,两者有什么区别呢?
<wbr>
是语句Word Break Opportunity的缩写,表示有机会就断开换行,而<br>
则直接换行显示,无论宽度足够与否。
四、wbr实际应用
<wbr>
实际应用比较多的,一是技术文档中,例如本文一开始的Canvas
就是Canvas中的对象和属性名,都比较长,此时需要用到智能换行。
另外一个就是URL地址的处理,这个就不仅仅在技术文档中了,很多对外的大型站点也会用到,尤其在移动端,屏幕宽度小,各种评论信息难免会有URL地址出现,此时,就可以对内容中的URL地址进行匹配,然后在/
和.
前面增加<wbr>
标签即可,写了个简易的替换方法,适用于不含HTML的纯文本信息:
String.prototype.urlWbr = function () { return this.replace(/http(?:s)?:\/\/(.*)\//gi, function (matchs, $1) { return matchs.replace($1, $1.replace(/(\/|\.)/g, '<wbr>$1')); }); };
实地测试下:
<div id="box" style="width:150px; background:#cd0000;"></div>
box.innerHTML = '本文地址是https://www .zhangxinxu .com /wordpress /2018 /09 /html-wbr-word-break/'.urlWbr();
效果如下截图:
您可以狠狠地点击这里:wbr实现URL地址换行demo
五、wbr与部分CSS的关系
如果是非连续英文字符,<wbr>
需要与white-space:nowrap
配合使用才有意义。
<wbr>
不能与word-break:break-all
同时使用,也会变得没有意义。
六、结语
在看亚运会男篮决赛,中国与伊朗,现在领先10分了,三分球可以的,形势不错,胜利在望,希望不要毒奶。
其他就没什么好说的了,主要让大家知道还有wbr这样的标签。
感谢阅读,欢迎反馈!
本文为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。
本文地址:https://www.zhangxinxu.com/wordpress/?p=7988
(本篇完)
- word-break:break-all和word-wrap:break-word的区别 (0.653)
- CSS line-break属性与中文标点换行 (0.653)
- CSS overflow-wrap新属性值anywhere是干嘛用的? (0.393)
- display:table-cell自适应布局下连续单词字符换行 (0.347)
- 5分钟快速了解text-wrap:balance的作用 (0.347)
- CSS排版为何强?瞧瞧多牛这换行 (0.198)
- 为什么white-space:nowrap可以让文字一行显示? (0.173)
- 小tips: 纯CSS实现打字动画效果 (0.111)
- 粉丝群第1期CSS小测点评与答疑 (0.111)
- 小tip: 使用CSS(Unicode字符)让inline水平元素换行 (0.087)
- CSS text-decoration实现宽度100%波浪线效果 (RANDOM - 0.087)
妙呀
支持,支持,不过如果内容是一长段中文, 在内容里添加了wbr标签,似乎没有效果
不是没有效果😂,而是中文字符好像必须与white-space: nowrap;配合,才会起作用🥲。刚刚我就试验了很多次不同情况下的效果,才发现的这一点特性。至于其它情况如何,我就不清楚了🤔。
妙
貌似在安卓火狐上,wbr不鸟white-space:nowrap;。如:
VreyLongaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaagaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbb
博主的技术文写的很棒,读完收获多多!自己也在自学前端,建立了一个前端学习交流企鹅群:784783012 欢迎大家进来。
写的真不错
打发第三方
大赞
最开始知道这标签还是靠了avalon….
差一点被你毒奶成功了。幸好最后逆转
赞一个,你不说还真不知道这个标签
赞