帶有多個下劃線的文本

Question

我的申請是它是一些在線文檔，用戶可以在其中註釋並給文本加下劃線以供參考。現在這可以由多個用戶完成，因此需要爲每個下劃線使用不同的顏色。

所以基本的要求是我需要一個文本下面有多個下劃線。下劃線的顏色也應該不同。

我知道的難題是我可以將div/span添加到行並將其放置在文本下方，但在響應窗口的情況下處理位置可能有點困難。

是否有任何方式使用文本屬性來做到這一點？ 我用Google搜索了一下，發現這個鏈接

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

他們利用fsymbols產生下劃線。 但我沒有得到如何添加到我的應用程序。它看起來並不像它可以有不同的顏色。

任何更簡單的方法，或者我必須只做艱難的方式？

Answer 1

用文本註釋文本似乎不正確的做法。我認爲註釋應該通過標記完成。爲了實現多個下劃線（我知道可能有兩個以上的用戶），可以在嵌套跨度中使用邊框底部。這些需要設置爲顯示爲內聯塊，因此您可以影響其高度，因此您可以嵌套更多跨度而不覆蓋邊界。還需要考慮到重疊 - 也是非等級的 - 可能會發生。

請注意，我從用戶列表和它們的關聯顏色中保留下劃線本身。

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）。但是，在應用程序中，將限制註釋圖層的顯示（假設爲五）並找到另一種顯示超過五個註釋圖層的方式。

Answer 2

看來他們只是用用結合上劃線，並強調

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

Answer 3

，你可以做這樣的

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>

Answer 4

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>

東西

你也可以嘗試在僞元素之前和之後玩。不知道你需要多少行，但你也可以添加更多，這種方式...

Answer 5

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

你的主要要求是：

應用是它的一些在線文檔，讓用戶可以 註釋，並強調以供參考文本。現在可以通過 多個用戶完成，因此每個 下劃線需要有不同的顏色。

根據上述引用，需要將所有單詞，空格或字母保留爲分隔行內元素，例如<span>。

爲什麼？

• 每個用戶都可以註釋文本（因此種種跡象可以選擇）
• 注意，當註解是漫長的，它打破了另一條線路，下劃線（境）也應保持垂直位置

當每個元素都會被分開時，處理註釋肯定會更容易，特別是當您要使用響應式佈局時。

讓我們來看看這個例子：

• 注意的是，用戶可以進行種種跡象
• 下劃線位置被保存的選擇（JavaScript是需要在這裏）
• 註釋的多個級別的（javascript在這裏使用）
• 它是完全響應（嘗試縮小，展開小提琴的預覽窗格）

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