Question

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

Answer 1

这是我的波浪线解决方案： 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>

它仅适用于内联元素，因此如果您尝试应用于段落标记，并且不将其应用于段落标记内的文本范围内，则它不能正常工作，但一般来说，无论如何都要将这种类型的样式应用于内联元素。

Answer 2

.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>

Answer 3

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

原始解决方案位于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;
}

只需使用html这样的<{1}}来包装<span class="error">文字，

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

请参阅示例：https://jsfiddle.net/hq13awkz/2/

Answer 4

＆＃13;

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;
}

＆＃13;

<p>Here's some text with wavy red underline!</p>

＆＃13;

Answer 5

查看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>

如何用CSS创建mutilline文本的波浪下划线？

5 个答案: