選択したテキストの背景の高さを上げる方法は？

私はGoogleの周りを見てきましたが、選択したテキストの背景の高さを上げるCSS方法が見つかりませんでした。選択したテキストの背景の高さを上げる方法は？

例えばAtomのエディタで選択したテキストの背景が右よりも著しく高くなっている：アトムはHTML/CSSで作られているので

、CSSの組み合わせがありますかしらこの結果を達成することができますか？

出典

2016-05-01 alexchenco

パディングとラインハイトを見ましたか？ – wizzardmr42

おそらくelement：focusプロパティを試してから、より高いフォントサイズを設定することができます。なぜなら、私たちは内容に集中していると思うからです。 –

@ wizzardmr42はい、私は両方を試しましたが、選択したテキストのサイズは増加しません。 – alexchenco

これは少しハックですが、あなたは、行の高さの錯覚を作成するために、改行なしスペースといくつかのパディングの内容を持つ擬似要素（::beforeのような）を使用して、それを行うことができます：

body { 
 
    background: #000; 
 
    color: #FFF; 
 
} 
 

 
::selection { 
 
    background: red; 
 
} 
 

 
p::before { 
 
    content: "\00a0"; 
 
    padding: 10px 0; 
 
    display: inline-block; 
 
}

This is default text 
 

 
<p>This text has a pseudo element</p>

を

jsFiddle：https://jsfiddle.net/azizn/8bmj4dm1/

警告：これは、タグ内の各ラインを包む必要になります。おそらくJavaScriptを使用して、複数行のコンテンツで動作するようにタグ内の各行を自動的に折り返すことができます。

出典

2016-05-01 07:17:03 Aziz

OPの実際の使用事例はわかりませんが、テキストが複数の行にまたがっていると、これは失敗します。 – Harry

@Azizハッキーですが、天才です。ありがとう！ – alexchenco

@ハリー私のアプリでは、各行が 'p'なので大丈夫だと思いますか？ – alexchenco

選択したテキストの背景の高さを上げる方法は？

答えて

関連する問題