如何在HTML中给拼写错误的单词下划波浪线

Question

我有一个HTML和JS网页。

我需要在拼写错误的单词下面添加红色波浪线。 我已经有算法来检测这些单词，但我只需要知道如何在这些单词下方放置波浪线。

- Helal Ismail

---

你的意思是拼写错误吗？ - Mild Fuzz

为什么要用波浪线？为什么不像其他程序一样使用粗虚线呢？ - Sparky

因为大多数程序使用波浪线吗？ - Timo Willemsen

@Timo：除了 Word 之外，“大多数”计算机上的程序都使用红色虚线...但大多数人不会注意到这种细微的差异。 - Sparky

截至2023年10月，浏览器通过text-decoration-style CSS属性原生支持此功能。 - undefined

Answer 1

如果你不想使用gif来实现卷曲的下划线，你可以通过纯CSS来实现：

<span style="border-bottom: 1px dotted #ff0000;padding:1px">
    <span style="border-bottom: 1px dotted #ff0000;">
        foobar
    </span>
</span>

（或在JSFiddle中运行）

- Wulf

Answer 2

红色波浪线非常简单，可以在CSS 3的文本修饰模块中指定。

* { text-decoration: underline wavy red; }

Run me in Chrome or Firefox to see me ride over a red wave!

浏览器支持正在迎头赶上。 您可以为Microsoft Edge投票，我鼓励您这样做。

规范并不新鲜；Firefox自2011年起就一直支持它，Chrome从2016年开始支持。 希望Safari和Edge也能很快支持它。

更新2017：Chrome在2016年关闭了该问题，并且我已经测试过它在Chrome 58中工作，这是对波浪线的巨大提升。

- Sheepy

---

在Chrome上看起来很糟糕，即使是虚线解决方案看起来也更好。难道他们不能向1980年代的微软Word学习吗？ - Pacerier

Answer 3

实际上，只使用CSS无法创建标准的花式下划线，但是请查看以下教程以了解如何自己创建:

摘自此处：http://www.phpied.com/curly-underline/

.curly-underline {
    background: url(underline.gif) bottom repeat-x;
}

- Pablo Fernandez