带有多个下划线的文本

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

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

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

是否有任何方式使用文本属性来做到这一点？我用Google搜索了一下，发现这个链接

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

他们利用fsymbols产生下划线。但我没有得到如何添加到我的应用程序。它看起来并不像它可以有不同的颜色。

任何更简单的方法，或者我必须只做艰难的方式？

来源

2016-11-29 pravid

通过倍数，你的意思是二，三？因为在你显示的图像中只有两个。 – Ionut

你能提供一个最终结果的例子吗？ – ppovoski

如果你只需要两个，你总是可以结合'border-bottom'和'text-decoration：underline'。 –

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

请注意，我从用户列表和它们的关联颜色中保留下划线本身。

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>

编辑：

我发现了一个更好的解决方案，其覆盖引起通过使用换行问题 “显示：直列块”：

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）。但是，在应用程序中，将限制注释图层的显示（假设为五）并找到另一种显示超过五个注释图层的方式。

来源

2016-11-29 09:04:35

Imo迄今为止的最佳解决方案。我在尝试类似的方法，但没有提出支持多行注释/响应的解决方案，这在这里似乎也是一个问题。 – Marvin

是的，有不同的线条高度，并且可以改进线条分割。 –

例如，如果跨度从第1行开始到第2行结束，则边框不会在第2行中加下划线。您需要调整浏览器窗口的大小以在您的示例中查看它，或者假设用户将全部文本从“Lorem”注释到“dapibus”。 /编辑：是“破线”是我正在寻找的词;） – Marvin

看来他们只是用用结合上划线，并强调

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/>

来源

2016-11-29 08:44:14 mplungjan

，你可以做这样的

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>

来源

2016-11-29 08:47:14 Rahul

用线条装饰文本的所有可能性的良好示范。但是这并没有解决原来的问题。 –

边框将无法使用多行文本 – luke

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>

东西

你也可以尝试在伪元素之前和之后玩。不知道你需要多少行，但你也可以添加更多，这种方式...

来源

2016-11-29 09:01:52 sinisake

到目前为止所有的答案都不完整。

你的主要要求是：

应用是它的一些在线文档，让用户可以注释，并强调以供参考文本。现在可以通过多个用户完成，因此每个下划线需要有不同的颜色。

根据上述引用，需要将所有单词，空格或字母保留为分隔行内元素，例如<span>。

为什么？

每个用户都可以注释文本（因此种种迹象可以选择）
注意，当注解是漫长的，它打破了另一条线路，下划线（境）也应保持垂直位置

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

让我们来看看这个例子：

注意的是，用户可以进行种种迹象
下划线位置被保存的选择（JavaScript是需要在这里）
注释的多个级别的（javascript在这里使用）
它是完全响应（尝试缩小，展开小提琴的预览窗格）

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

来源

2016-11-30 02:13:47 luke

这似乎也是一个很好的解决方案。我对这两种解决方案的另一个担忧是，如果我们正在谈论巨大的文档和许多用户注释文本，它会影响性能吗？ – pravid

这取决于你的意思是巨大的。我已经做了一个JavaScript执行时间的简单测试，对于25k的span元素大约需要5秒。很显然，JavaScript代码可以进行优化，或者可以在呈现文档时限制span元素的数量。小提琴：https：//jsfiddle.net/00w5f0c9/2/ – luke

带有多个下划线的文本

回答

相关问题