長方形のボックス内にテキスト（インラインブロック）を選択するCSSセレクタはありますか？

Question

CSSルールは、テキスト（またはインラインブロック）を含むボックスの部分を選択できますか？

例えば、<p>The quick brown fox jumped over the lazy dog</p>のようなHTMLフラグメントは、次のようにレイアウトされることがあります。

+--------------------------+ 
| The quick brown fox  | 
| jumped over the   | 
| lazy dog    | 
+--------------------------| 

私はp { background: red }のようなCSSルールを作成する場合は、全体のボックス/長方形は「空白を含む赤色の背景を持つことになります"各行の最後に。

セレクタを指定する方法は、各行で実際のテキストだけが赤い背景を持つように指定する方法はありますか？

実際にテキストを超えると、デフォルトでカーソルが '矢印'から 'i-beam'に変更されています。それが段落ボックスのどこか他の場所でテキストではなく、それがi-beamではない矢印です。

p { cursor: crosshair }のような明示的なルールを指定すると、四角いボックス内のどこでも有効です。繰り返しますが、実際にカーソルがテキストの上にあるときだけ選択されるルールを持つことは可能ですか？あなたは何ができるか

Answer 1

はスパン要素でテキストを折り返すし、それに背景とカーソルをプロパティを設定することです。

Answer 2

CSSセレクタがテキストノードと一致しないため、私が知っている限り、正確に行う方法はありません。テキストをスパン内に折り返してスパンをスタイルする必要があります。

Answer 3

は多分助けるために簡単なコードスニペットをjsut：

はいえ、スタイルや必要な2 extra..notを追加しました...それが役に立てば幸い..

p { 
    background-color: gray; 
    width: 700px; 
    height: 500px; 
    margin:auto; 
} 

span { 
    background-color: red; 
    width: 500px; 
    height: 200px; 
    border: 2px blue; 
    border-style: dotted dashed; 
    font-size: 2em; 
    display: block; 
    margin:auto; 
}