Chrome中波浪下划线无法覆盖全字符：是否为Bug及解决办法

这确实是Chromium内核浏览器（包括Google Chrome）的已知渲染Bug，并非预期行为。Firefox的波浪下划线实现逻辑与Chrome不同，因此能完整覆盖所有字符。

问题原因 #

根据你提到的Chromium相关Bug报告，Chrome渲染波浪下划线时会采用「向下取整到最近的波长」（round down to the nearest wavelength）的逻辑：当文本长度（尤其是单个短字符）小于波浪的最小波长单位，或者文本末尾长度不足一个完整波长时，下划线就会被截断，导致部分字符无法被覆盖。

复现示例 #

CSS代码 #

.dotted, .wavy { 
  text-decoration-skip-ink: none; 
  text-decoration-line: underline; 
  text-decoration-color: blue; 
}
.dotted { text-decoration-style: dotted; }
.wavy { text-decoration-style: wavy; }
div { font-family: "Times New Roman" }
div { border: 4px solid black; margin: 5px; padding: 0px 5px; }
.ok { border-color: green }
.problem { border-color: red }
.using-sans { font-family: sans }

HTML代码 #

<div class=ok>
 <p> The dotted underline correctly underlines all characters: <span class=dotted>works ok</span> </p>
 <p> As well as single characters: <span class=dotted>d</span> </p>
</div>
<div class="problem">
 <p> But the wavy underline misses the last character: <span class=wavy>does not work ok</span> </p>
 <p> And does not work for some single characters: <span class=wavy>d</span> </p>
</div>
<div class="ok">
 <p> Suprisingly, it does work for others: <span class=wavy>W</span> </p>
</div>
<div class="problem">
 <p> Which seem to depend on the length of the glyph, as the lowercase version of "w" does not work: <span class=wavy>w</span> </p>
</div>
<div class="ok using-sans">
 <p> Unless we change the font: <span class=wavy>w</span> </p>
</div>
<div class="problem using-sans">
 <p> But again, it will only work for some characters: <span class=wavy>p</span> </p>
</div>

不使用背景图的解决方案 #

以下是几种无需依赖背景图即可实现完整波浪下划线的实用方法：

• 调整字体：切换到某些无衬线字体（如sans-serif）能改善部分字符的渲染效果，但无法彻底解决所有字符的截断问题，属于临时适配方案。
• 添加微小内边距：给波浪下划线元素添加少量右侧内边距，让文本总长度刚好满足波长取整要求，示例：

  .wavy { padding-right: 0.1em; }
  

• 轻微水平拉伸：通过CSS变换对文本进行微小的水平拉伸，避免长度刚好卡在波长的截断点，示例：

  .wavy { transform: scaleX(1.01); transform-origin: left center; }
  

• 伪元素模拟（非背景图）：使用::after伪元素创建一个宽度略大于文本的波浪下划线，利用文本装饰继承实现，示例：

  .wavy { 
    position: relative; 
    text-decoration: none;
  }
  .wavy::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    color: transparent;
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: blue;
    width: 100.5%; /* 略宽于原文本 */
    overflow: hidden;
  }
  

  对应HTML需要添加data-text属性：<span class=wavy data-text="d">d</span>

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