複数の下線付きのテキスト

Question

私のアプリケーションは、ユーザーが参照できるようにテキストに注釈をつけて下線を付けることができるオンラインドキュメントです。これは複数のユーザーが行うことができるため、下線ごとに色分けする必要があります。

基本的な要件は、その下に複数の下線付きのテキストが必要なことです。また、アンダーラインの色も異なるはずです。

私は、div/spanを行で追加してテキストの下に置くことができますが、応答性の高いウィンドウの場合は位置を扱うのが少し難しいかもしれないということを知っています。

テキストプロパティのみを使用してこれを行う方法はありますか？ 私はそれをGoogleで検索し、彼らは下線を生成するfsymbolsを使用している

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

このリンクを発見しました。 しかし、私は私のアプリケーションにこれをどのように追加することができません。また、それは異なる色を持つことができるように見えません。

これより単純な方法や難しいのはどうすればいいですか？

Answer 1

テキストでテキストに注釈を付けるのは正しい方法ではありません。注釈はマークアップで行うべきだと思う。複数のアンダーラインを実装するには（2人以上のユーザーがいる可能性があることを理解しています）、ネストしたスパンでボーダーボトムを使用できます。これらはインラインブロックとして表示するように設定する必要があるため、高さに影響を与えることができるため、境界を上書きせずにさらにスパンをネストすることができます。また、階層化されていないオーバーラップも発生する可能性があることも考慮する必要があります。

ユーザーのリストと関連する色から下線の長さ自体を維持していたことに注意してください。

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：

私は、 "：インラインブロック表示を"：使用によって引き起こされる改行の問題をカバーし、より良い解決策を見つけた

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で簡単にできます）。しかし、アプリケーションでは、注釈レイヤーの表示を5に制限し、5つ以上の注釈レイヤーがあることを表示する別の方法を見つけます。

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

これは

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

ようにそれに何かを行うことができChromeで私のために動作しません。

擬似要素の前後で再生することもできます。あなたが必要とする行数はわかりませんが、この方法でいくつか追加することもできます。

Answer 5

これまでの回答はすべて完了していません。

あなたの主な要件は次のとおりです。

アプリケーションは、参照するためのテキストを強調するためにユーザが 注釈をし、いくつかのオンラインドキュメントであるということです。今度は 複数のユーザーがこれを行うことができますので、 下線ごとに異なる色を設定する必要があります。

上記の引用によれば、すべての単語、空白、さらには文字を分離されたインライン要素（例えば、<span>）にする必要があります。

なぜですか？

• すべてのユーザはまた、垂直位置

に保存する必要があります（したがって、すべての記号が選択できます）注釈が長いと、それは別の行に分割したときに、（境界線）を強調していること

注意をテキストに注釈を付けることができます

特にレスポンシブなレイアウトを使用する場合は、すべての要素を区切るときにアノテーションを処理する方が簡単です。

の例を見てみましょう：ユーザーが

下線位置は注釈の

複数のレベルが（ジャバスクリプトがここでは必要だった）ことができます保存されているすべての記号の選択をすることができることを

• 注意（ジャバスクリプトをここで使用された）
• それは完全に応答する（フィドルのプレビューペインを展開し、縮小してみてください）

サポートします

フィドル： https://jsfiddle.net/00w5f0c9/1/