我的应用程序是，它是一些在线文档，用户可以在其中对文本进行注释和下划线以供参考。现在这可以由多个用户完成，因此每个下划线需要有不同的颜色。
所以基本的要求是我需要有一个下面有多个下划线的文本。下划线颜色也应该不同。
我知道的困难方法是，我可以添加带有行的 div/span 并将其放置在文本下方，但在响应窗口的情况下处理位置可能有点困难。
有没有办法仅使用文本属性来做到这一点？
我用谷歌搜索并找到了这个链接
http://fsymbols.com/generators/lines/ http://fsymbols.com/generators/lines/
他们使用 fsymbols 来生成下划线。
但我不知道如何将其添加到我的应用程序中。而且它看起来也不可能有不同的颜色。
有更简单的方法还是我只能采用困难的方法？
用文本注释文本似乎不是正确的方法。我认为注释应该通过标记来完成。要实现多个下划线（我知道可能有两个以上的用户），您可以在嵌套跨度中使用 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>
EDIT:
我找到了一个更好的解决方案，涵盖了使用“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 可能会更容易）。但是，在应用程序中，您会将注释图层的显示限制为（比方说）五个，并找到另一种方法来显示五个以上的注释图层。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
