带有多个下划线的文本

Question

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

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

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

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

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

他们使用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; }

<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可能会更容易).但是,在应用程序中,您将注释图层的显示限制为(假设)为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>