借助wbr标签实现连续英文字符的精准换行

一、连续英文换行的问题

在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;
    ">
       Canvaswbr>
    Renderingwbr>
    Context2Dwbr>
    .globalwbr>
    Compositewbr>
    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中使用& #x200b; 代替wbr> ，不过语义不太好，建议还是使用wbr> 。

三、wbr与br换行的区别

wbr> 元素有个近亲叫做br> 元素，两者有什么区别呢？

wbr> 是语句Word Break OpportUnity的缩写，表示有机会就断开换行，而br> 则直接换行显示，无论宽度足够与否。

四、wbr实际应用

wbr> 实际应用比较多的，一是技术文档中，例如本文一开始的CanvasRenderingContext2D.globalCompositeOperation就是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这样的标签。

感谢阅读，欢迎反馈！

（本篇完）

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！