带有多个下划线的文本
我的申请是它是一些在线文档,用户可以在其中注释并给文本加下划线以供参考。现在这可以由多个用户完成,因此需要为每个下划线使用不同的颜色。带有多个下划线的文本
所以基本的要求是我需要一个文本下面有多个下划线。下划线的颜色也应该不同。
我知道的难题是我可以将div/span添加到行并将其放置在文本下方,但在响应窗口的情况下处理位置可能有点困难。
是否有任何方式使用文本属性来做到这一点? 我用Google搜索了一下,发现这个链接
http://fsymbols.com/generators/lines/
他们利用fsymbols产生下划线。 但我没有得到如何添加到我的应用程序。它看起来并不像它可以有不同的颜色。
任何更简单的方法,或者我必须只做艰难的方式?
用文本注释文本似乎不正确的做法。我认为注释应该通过标记完成。为了实现多个下划线(我知道可能有两个以上的用户),可以在嵌套跨度中使用边框底部。这些需要设置为显示为内联块,因此您可以影响其高度,因此您可以嵌套更多跨度而不覆盖边界。还需要考虑到重叠 - 也是非等级的 - 可能会发生。
请注意,我从用户列表和它们的关联颜色中保留下划线本身。
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)。但是,在应用程序中,将限制注释图层的显示(假设为五)并找到另一种显示超过五个注释图层的方式。
看来他们只是用用结合上划线,并强调
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/>
,你可以做这样的
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>
用线条装饰文本的所有可能性的良好示范。但是这并没有解决原来的问题。 –
边框将无法使用多行文本 – 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>
你也可以尝试在伪元素之前和之后玩。不知道你需要多少行,但你也可以添加更多,这种方式...
到目前为止所有的答案都不完整。
你的主要要求是:
应用是它的一些在线文档,让用户可以 注释,并强调以供参考文本。现在可以通过 多个用户完成,因此每个 下划线需要有不同的颜色。
根据上述引用,需要将所有单词,空格或字母保留为分隔行内元素,例如<span>
。
为什么?
- 每个用户都可以注释文本(因此种种迹象可以选择)
- 注意,当注解是漫长的,它打破了另一条线路,下划线(境)也应保持垂直位置
当每个元素都会被分开时,处理注释肯定会更容易,特别是当您要使用响应式布局时。
让我们来看看这个例子:
- 注意的是,用户可以进行种种迹象
- 下划线位置被保存的选择(JavaScript是需要在这里)
- 注释的多个级别的(javascript在这里使用)
- 它是完全响应(尝试缩小,展开小提琴的预览窗格)
通过倍数,你的意思是二,三?因为在你显示的图像中只有两个。 – Ionut
你能提供一个最终结果的例子吗? – ppovoski
如果你只需要两个,你总是可以结合'border-bottom'和'text-decoration:underline'。 –