带有多个下划线的文本

Question

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

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

我知道的困难方法是我可以用线添加 div/span 并将其定位在文本下方但是在响应 window.[=11 的情况下处理这些位置可能有点困难=]

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

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

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

有没有更简单的方法，或者我只能用困难的方法？

Answer 1

他们似乎只是在使用 ̅c̅o̅m̅b̅i̅̅̅̅ni̅̅̅ng overline 和 ̲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 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

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 伪元素。不确定你需要多少行，但你也可以添加更多，这样...

Answer 4

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

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

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 5

目前所有的答案还不完整。

您的主要要求是：

Application is that it is some online document to which user can annotate and underline the text for reference. Now this can be done by multiple users, hence need to have different colors for each underline.

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

为什么？

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

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

我们来看例子：

请注意，用户可以选择每个标志
正在保留下划线位置（此处需要javascript）
可以支持多级标注（这里用的是javascript）
完全响应（尝试缩小、展开 fiddle 的预览窗格）

Fiddle: https://jsfiddle.net/00w5f0c9/1/

带有多个下划线的文本

Text with multiple underlines

javascript

css

underline