带有多个下划线的文本

Question

我的应用是它是一些在线文档，用户可以对其进行注释和下划线以供参考。现在这可以由多个用户完成，因此需要为每个下划线设置不同的颜色。

所以基本要求是我需要有一个下面有多个下划线的文本。下划线颜色也应该不同。

我知道的难点是我可以添加 div/span 与 line 并将其放置在文本下方，但在响应窗口的情况下处理位置可能有点困难。

有没有办法只使用文本属性来做到这一点？ 我用谷歌搜索它并找到了这个链接

http://fsymbols.com/generators/lines/

他们使用 fsymbols 来生成下划线。 但是我不知道如何将其添加到我的应用程序中。而且它看起来不能有不同的颜色。

有更简单的方法还是我只需要艰难的方法？

Answer 1

用文本注释文本似乎不是正确的方法。我认为注释应该通过标记来完成。要实现多个下划线（我知道可能有两个以上的用户），您可以在嵌套跨度中使用边框底部。这些需要设置为显示为内联块，以便您可以影响它们的高度，因此您可以嵌套更多跨度而不覆盖边框。还需要考虑到可能会发生重叠 - 也是非分层的。

请注意，我在用户列表及其关联颜色中保留了下划线范围。

span.user { border-bottom:1px solid; display:inline-block; padding-bottom:1px; }

span[data-uid='001'] { border-bottom-color:blue; }
span[data-uid='002'] { border-bottom-color:red; }
span[data-uid='003'] { border-bottom-color:orange; }

<p>
Lorem ipsum dolor sit <span class="user" data-uid="003">amet, <span class="user" data-uid="001"><span class="user" data-uid="002">consectetuer</span> adipiscing elit</span>. Aenean</span> commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. <span class="user" data-uid="001">Donec <span class="user" data-uid="003">quam</span> felis,</span> ultricies nec, pellentesque eu, pretium quis, sem. <span class="user" data-uid="003">Nulla</span> consequat massa quis enim. Nullam dictum <span class="user" data-uid="001">felis eu pede mollis pretium. </span><span class="user" data-uid="002"><span class="user" data-uid="001">Integer</span> tincidunt.</span> Cras dapibus. 
</p>

编辑：

我找到了一个更好的解决方案，涵盖了使用“display:inline-block”引起的换行问题：

p { width:150px; line-height:2em; }

span.annotation { border-bottom:1px solid; }

span.annotation span.annotation { padding-bottom:2px; }

span.annotation span.annotation span.annotation { padding-bottom:4px; }

span.annotation span.annotation span.annotation span.annotation { padding-bottom:6px; }

span[data-uid="001"] { border-color:orange; }
span[data-uid="002"] { border-color:blue; }
span[data-uid="003"] { border-color:red; }
span[data-uid="004"] { border-color:green; }

<p>
Lorem <span class="annotation" data-uid="004">ipsum dolor <span class="annotation" data-uid="001">sit amet, <span class="annotation" data-uid="002">consectetuer adipiscing</span> elit.</span> Aenean commodo ligula eget dolor. Aenean massa. <span class="annotation" data-uid="002">Cum sociis <span class="annotation" data-uid="001">natoque penatibus et <span class="annotation" data-uid="003">magnis</span> dis parturient montes, nascetur</span> ridiculus mus.</span> Donec quam felis, ultricies nec, <span class="annotation" data-uid="002">pellentesque eu, </span><span class="annotation" data-uid="001"><span class="annotation" data-uid="002">pretium</span> quis, sem.</span> Donec pede justo, fringilla vel, aliquet nec,</span> vulputate eget, arcu.
</p>

我唯一不喜欢这里的是你需要为每一层嵌套使用 CSS 语句（使用 LESS 可能更容易）。但是，在应用程序中，您可以将注释层的显示限制为（比如说）五个，并找到另一种方法来显示超过五个注释层。

Answer 2

你可以这样做

p {
  text-decoration: underline overline line-through;
  border-top: 3px solid red;
  border-bottom: 3px solid green;
  display: inline-block;
  padding: 2px 0 0 0;
  font-size: 50px;
  margin: 0;
}

<p>Test</p>

Answer 3

似乎他们只是使用 ̅c̅o̅m̅b̅i̅̅̅̅ni̅̅̅ng 上划线和 ̲u̲n̲d̲e̲r̲l̲in̲̲̲̲̲e̲

http://www.fileformat.info/info/unicode/char/0332/browsertest.htm

http://www.fileformat.info/info/unicode/char/0305/browsertest.htm

我不确定您是否可以使组合下划线与文本颜色不同，但您可以在某些浏览器中更改文本装饰的颜色 Changing Underline color

这对我在 Chrome 中不起作用

.example {
  text-decoration: underline;
  -webkit-text-decoration-color: red;
  -moz-text-decoration-color: red;
  /* vendor prefix not required as of V36 */
  text-decoration-color: red;
  /* color: green; */

}

<b class="example">text-decoration</b>  <br/>

  
<b style="color:red">u̲n̲d̲e̲r̲l̲in̲̲̲̲̲e̲<b><br/>
  
  
  
  

Answer 4

到目前为止，所有的答案都不完整。

您的主要要求是：

应用是用户可以访问的一些在线文档 注释并在文本下划线以供参考。现在这可以通过 多个用户，因此需要为每个用户设置不同的颜色 下划线。

根据上面的引用，要求将所有单词、空格甚至字母保存为单独的内联元素，例如<span>。

为什么？

• 每个用户都可以注释文本（因此可以选择每个标志）
• 请注意，当注解较长且换行时，下划线（边框）也应保持垂直位置

当每个元素都被分开时，处理注释肯定会更容易，尤其是当你想使用响应式布局时。

我们看一下例子：

• 请注意，用户可以选择每个标志
• 下划线位置被保留（此处需要javascript）
• 可以支持多级注释（这里使用了javascript）
• 它是完全响应式的（尝试缩小、扩大 fiddle 的预览窗格）

小提琴： https://jsfiddle.net/00w5f0c9/1/

Answer 5

p {
  font-family:tahoma;
   font-size:16px;
}

span {

  border-bottom:1px solid blue;
  position:relative;
  display:inline-block;
 
}
span:before {
  content:'';
  position:absolute;
  left:0;
  bottom:-3px;
  border-bottom:1px solid red;
  display:block;
  width:100%;
  
}
span:after {
  content:'';
  position:absolute;
  left:0;
 bottom:-5px;
  border-bottom:1px solid green;
  display:block;
  width:100%;
  
}

<p>
non-decorated text <span>decorated text</span> non-decorated <span>decorated text</span>
not decorated
</p>

您也可以尝试使用 after 和 before 伪元素。不确定你需要多少行，但你也可以添加更多，这样......