带多个下划线的文字 [英] Text with multiple underlines

问题描述

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

My 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.

所以基本的要求是，我需要一个文本， 。

So basic requirement is that I need to have a text with multiple underlines below it. Also the underline colors should differ.

硬的方法我知道是我可以添加div / span的行和位置在文本下，但它可能有点难以处理在响应窗口的情况下的位置。

Hard way I know is that I can add div/span with line and position it under the text but it can be bit difficult to handle the positions in case of responsive window.

有没有办法使用文本属性？
我googled为它找到此链接

Is there any way to do this using text properties only? I googled for it and found this link

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

他们使用fsymbols生成下划线。
但是我没有得到如何添加到我的应用程序。

They are using fsymbols to generate underlines. But I'm not getting how can I add this to my application. Also it doesn't look like it can have different colors.

任何更简单的方法，或者我只能做困难的方式吗？

Any simpler way or I have to do the hard way only?

推荐答案

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

Annotating text with text does not seem the right way to do it. I think annotation should be done by markup. To implement multiple underlinings (I understand that there could be more than two users), you could use border-bottoms in nested spans. These need to be set to display as inline-blocks, so you can influence their height, so you can nest more spans without overwriting the border. It also needs to be considered that overlappings - also non-hierarchical - can happen.

请注意，我从用户列表和他们的相关颜色保持下划线span本身。

Note that I kept the underlining span itself from the list of users and their associated colors.

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造成的换行问题：

I found a better solution that covers the line-breaking problem caused by using "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可能更容易）。但是，在应用程序中，您可以将注释图层的显示限制为（让我们说）五个，并找到另一种方式来显示有五个以上的注释图层。

The only thing I dislike here is that you need a CSS statement for each layer of nesting (could be easier with LESS). However, in the application you would limit the display of the annotation layers to (lets say) five and find another way to display that there are more than five annotation layers.

这篇关于带多个下划线的文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！