Question

我的应用程序是它是一些在线文档，用户可以在其中注释并为文本加下划线以供参考。现在，这可以由多个用户完成，因此每个下划线需要有不同的颜色。

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

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

有没有办法只使用文本属性？我用Google搜索并找到了这个链接

他们正在使用fsymbols来生成下划线。但是我没有得到如何将其添加到我的应用程序中。它看起来也不会有不同的颜色。

任何更简单的方法，或者我只能采取艰难的方式？

Answer 1

使用文本注释文本似乎不是正确的方法。我认为注释应该通过标记来完成。要实现多个下划线（我知道可能有两个以上的用户），您可以在嵌套跨度中使用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; }

 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. 

我唯一不喜欢的是你需要为每一层嵌套创建一个CSS语句（使用LESS可能会更容易）。但是，在应用程序中，您可以将注释图层的显示限制为（假设）为5，并找到另一种方式来显示有超过五个注释图层。

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上线和下划线

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

到目前为止，所有答案都没有完成。

您的主要要求是：

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

根据上面的引用，要求将所有单词，空格或偶数字母保留为单独的内联元素，例如。

为什么？

每个用户都可以注释文本（因此可以选择每个符号）
请注意，当注释很长并且它会断开到另一行时，下划线（边框）也应该保留垂直位置

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

让我们来看看这个例子：

请注意，用户可以选择每个符号
正在保留下划线位置（此处需要javascript）
可支持多级注释（此处使用javascript）
完全响应（尝试缩小，扩展小提琴的预览窗格）

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

Answer 5

＆＃13;

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

＆＃13;

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

＆＃13;

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

带有多个下划线的文本

5 个答案: