如何使用 CSS 在多行文本上创建波浪下划线？答案

【问题标题】：How to create a wavy underline on mutilline text with CSS?如何使用 CSS 在多行文本上创建波浪下划线？
【发布时间】：2017-01-18 19:48:44
【问题描述】：

我尝试了A wavy underline in CSS这些方法，发现它们无法保持文本的原始状态。它们只显示在一行中。如果选择的范围多于一行，则不会显示。那么谁能告诉我如何改进它？

【问题讨论】：

希望您至少尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议你做一些additional research，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的方法以及为什么它不起作用。

标签： html css

【解决方案1】：

查看text-decoration。这是我得到的最短的。

text-decoration-skip-ink: none; 可以画在整个文本内容的长度上。

.err {
  text-decoration: red wavy underline;
  text-decoration-skip-ink: none;
}

<p>This text has a <span class='err'>tpyo</span> in it. </p>
<p>This text has a <span class='err'>logner pyto insid Spicy jalapeno bacon ipsum dolor amet tail tenderloin doner turducken shankle, meatloaf flank spare ribs tri-tip prosciutto kielbasa chicken alcatra landjaeger. Alcatra meatball pork, shank meatloaf porchetta biltong pig</span>.</p>

【讨论】：

【解决方案2】：

这是我的波浪线解决方案： http://dabblet.com/gist/f6cfd244631c8ca898ef60b100b96386

.err { 
  background-image:
    linear-gradient(45deg, transparent 65%, red 80%, transparent 90%),
    linear-gradient(135deg, transparent 5%, red 15%, transparent 25%),
    linear-gradient(135deg, transparent 45%, red 55%, transparent 65%),
    linear-gradient(45deg, transparent 25%, red 35%, transparent 50%);
  background-repeat:repeat-x;
  background-size: 8px 2px;
  background-position:0 95%;
}

<p>This text has a <span class='err'>tpyo</span> in it. </p>
<p>This text has a <span class='err'>logner pyto insid Spicy jalapeno bacon ipsum dolor amet tail tenderloin doner turducken shankle, meatloaf flank spare ribs tri-tip prosciutto kielbasa chicken alcatra landjaeger. Alcatra meatball pork, shank meatloaf porchetta biltong pig</span>.</p>

它只适用于内联元素，所以如果你试图应用到一个段落标签，而不是将它应用到段落标签内文本周围的跨度，它就不能很好地工作，但一般来说你'无论如何都会将这种类型的样式应用于内联元素。

【讨论】：

【解决方案3】：

p { 
   text-decoration: underline; 
   -moz-text-decoration-color: red; 
   text-decoration-color: red; 
   -moz-text-decoration-style: wavy; /* Code for Firefox */ 
   text-decoration-style: wavy;
}

&lt;p&gt;Here's some text with wavy red underline!&lt;/p&gt;

【讨论】：

【解决方案4】：

这是一个简单的解决方案，

原始解决方案是Sleek Geek 在post

.error {
  display: inline-block;
  position: relative;
  border-bottom:2px dotted red;
}
.error:before {
  content: "~";
  font-size: 0.6em;
  font-weight: 700;
  font-family: Times New Roman, Serif;
  color: red;
  width: 100%;
  position: absolute;
  height: 5px;
  top: 14px;
  left: -2px;
  overflow: hidden;
  border-bottom: 2px dotted red;
}

只需像这样使用<span class="error"> 包装html 文本选择，

<p>
   Lorem ipsum dolor sit amet, <span class="error">consectetur adipiscing
   elit</span> Maecenas.
</p>

查看示例：https://jsfiddle.net/hq13awkz/2/

【讨论】：

【解决方案5】：

.err {
  border-bottom:2px dotted red;
  display: inline-block;
  position: relative;
}

.err:after {
  content: '';
  height: 5px;
  width: 100%;
  border-bottom:2px dotted red;
  position: absolute;
  display:block;
  bottom: -3px;
  left: -2px;

  
  }

<div class="err">This is the first line </div><br/>
<div class="err">This is the second line</div>

【讨论】：