&nbs p;
wbr:after { content: "/00200B"; }
一、连续英文换行的问题
在web网页中，连续英文单词默认是不换行的，例如下面的测试代码：
<div style="width:150px; background:#cd0000;"> CanvasRenderingContext2D.globalCompositeOperation </div>
实时效果如下（若无效果，可访问原文）：
CanvasRenderingContext2D.globalCompositeOperation
可以看到，英文字符直接飞到了 < div > 元素之外（ 红色 背景之外）。
我们通常做法是使用 word- br eak:break-all 或者 word-wrap:break-word （这两个声明区别可以参见这篇 文章 ）。
例如：
<div style="width:150px; background: # cd0000; word-break:break-all;"> CanvasRenderingContext2D.globalCompos IT e opera tion </div>
实时效果如下，可以看到英文单词换行了：
CanvasRenderingContext2D.globalCompositeO PE ration
但是，会有一个很明显的问题，这换行的位置把英文单词直接破开了， 可读性 下降明显。
有没有什么方法，技能换行，又不破坏单词呢？
使用 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>
实时效果如下：
CanvasRenderingContext2D.globalCompositeOperation
@H_ 777 _40@
此时， CSS 不行， HTML 可以出马了，HT ML 中有个 <wbr> 元素标签，可以实现英文单词的 精准 换行。
二、wbr与英文换行
我们先看效果吧，HTML代码如下：
<div style="width:150px; background:#cd0000;"> Canvas<wbr>Rendering<wbr>Context2D<wbr>.global<wbr>Composite<wbr>Operation </div>
也就是把 <wbr> 标签写在单词连接处，于是，神奇的事情发生了：
Canvas Rendering Context2D .global Composite Operation
单词分隔的地方，全部都是写入了 <wbr> 标签的地方，这就是 <wbr> 标签的神奇之处， 宽 度不够，在我这里换行；宽度足够，还是一行显示，非常智能，如下GIF截图效果：
眼见为实，您可以狠狠地点击这里：<wbr> HTML标签功能演示demo
IE浏览器的兼容处理如果只是单纯写入 <wbr> 标签，在IE浏览器下，至少windows 7系统下，都是无效的，所有字符还是一行显示，Ch rom e，Firefox等浏览器表现都是符合预期的。
好在有 简单 的方法使IE浏览器也兼容 <wbr> 特性，就是加个如下CSS片段：
wbr :after { content: '/00200B'; } U+200B是一个0宽空格，可以看成是和 <wbr> 标签功能对应的字符产物，因此，我们也可以直接在HTML中使用 & am p;#x200b; 代替 <wbr> ， 不过 语义不太好，建议还是使用 <wbr> 。
三、wbr与br换行的区别
<wbr> 元素有个近亲叫做 <br> 元素，两者有什么区别呢？
<wbr> 是语句Word Break Opport Unity 的缩写，表示有 机会 就断开换行，而 <br> 则直接换行显示，无论宽度足够与否。
四、wbr实际应用
<wbr> 实际应用比较多的，一是技 术 文档中，例如本文一 开始 的 Canvas Rendering Context2D .global Composite Operation 就是Canvas中的对象和属性名，都比较长，此时需要用到智能换行。
另外一个就是 url地址 的处理，这个就不仅仅在技术文档中了，很多对外的大型站点也 会用 到，尤其在移动端，屏幕宽度小，各种评论信息难免会有URL地址出现，此时，就可以对内容中的URL地址进行匹配，然后在 / 和 . 前面增加 <wbr> 标签即可，写了个 简易 的替换方法，适用于不含HTML的 纯文本 信息：
String. PR ototype.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 /word Press /2018 /09 /html-wbr-word-break/'.urlWbr();
效果如下截图：
您可以狠狠地点击这里：wbr实现URL地址换行demo
五、wbr与部分CSS的关系
如果是非连续英文字符， <wbr> 需要与 white -s pace:nowrap 配合使用才有意义。
<wbr> 不能与 word-break:break-all 同时使用，也会变得没有意义。
六、结语
在看亚运会男篮决赛，中国与伊朗，现在领先10分了，三分球可以的，形势不错，胜利在望，希望不要毒奶。
其他就没什么好说的了，主要让大家 知道 还有wbr这样的标签。
感谢阅读，欢迎反馈！
（本篇完）
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-借助wbr标签实现连续英文字符的精准换行 全部内容，希望文章能够帮你解决 html5教程-借助wbr标签实现连续英文字符的精准换行 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-借助wbr标签实现连续英文字符的精准换行的详细内容...