Chrome换行前末尾空格下划线问题及跨浏览器渲染方案咨询

这个浏览器渲染差异确实挺闹心的——我之前做项目也碰到过一模一样的问题：Firefox 59里链接换行前的末尾空格不会被下划线标记，但Chromium 65偏要把这个看起来没用的空格也带下划线。不想每次都手动删空格的话，有几个挺合理的解决办法：

先简单说下原因 #

其实这是不同浏览器对CSS文本装饰规范的实现差异：Chromium系浏览器严格按照规范，给链接内的所有空格（包括<br>前的末尾空格）都加上下划线；而Firefox做了用户友好的优化，自动跳过了这些视觉上无效的空格。

解决方案 #

1. 用CSS text-decoration-skip 属性（最推荐）

这是改动最小的办法，直接写一行CSS就能搞定：

a {
  text-decoration-skip: spaces;
  /* 顺便加这个，让下划线避开字体的下行部分（比如g、y的底部），体验更好 */
  text-decoration-skip-ink: auto;
}

这个属性现代浏览器支持得都不错，不用动任何HTML结构，完美解决问题。

2. 用软换行<wbr>代替强制换行<br>

如果你的换行不是必须强制的，只是因为容器太窄需要自动换行，换成<wbr>会更符合排版逻辑：

<div style="width:100px">
  <a href="#">This is long link, <wbr>with a line break</a>
</div>

<wbr>只会在文本超出容器宽度时才触发换行，而且不会带来末尾空格的下划线问题，比硬塞<br>更灵活。

3. 用box-shadow模拟下划线

要是需要兼容比较老的浏览器，可以用盒子阴影模拟下划线——空格不会触发阴影，自然就不会有下划线了：

a {
  text-decoration: none;
  box-shadow: inset 0 -1px 0 0 currentColor;
  /* 可选：调整下划线和文本的距离，让它更贴近原生下划线的位置 */
  padding-bottom: 1px;
}

这种方式还能自定义下划线的粗细、颜色，灵活性很高。

内容的提问来源于stack exchange，提问作者Jakuje