段落タグ内の行のブロックされた背景

Question

段落内のテキスト行を強調表示（または背景を記入）する方法を探しています。そのことが重要ならば私はWordpressで開発しています。ここで

はサンプルコードです：

<p> this is a line 
This is a line a little longer 
Just a short one 
a really really long one that is longer than any 
a medium sized one to end it</p> 

私はすべての行がテキストの長さだけを行く黒い背景を持っていると思います。私はちょうど各Pをスタイルすることはできませんので、ラインは1 Pのタグで包み込まれています。

チュートリアルへのアイデア/リンク？私は各ラインをPにするためにjqueryに頼らざるを得ないと思うが、もしそれがopitonなら、そうするだろう。

Answer 1

最も簡単な方法は、表示する段落をインラインに設定し、背景色を追加することです。単一のスペースとして改行を扱うので、あなたが持ってしようとしている

<p> this is a line<br/> 
This is a line a little longer<br/> 
Just a short one<br/> 
a really really long one that is longer than any<br/> 
a medium sized one to end it</p> 

Answer 2

ブラウザ：

p { 
    display: inline; 
    color: white; 
    background-color: black; 
} 

と段落はなる：あなたはしかし、各行の最後に改行を追加する必要がありますHTMLを変更します。

私は、Javascriptで改行がどこにあるのかわかりません。この場合は、HTMLを自分で修正しなければならず、基本的にPatが提案したことを行う必要があります。

Answer 3

jqueryを使用すると、特定のタグの内容をwrapInner関数のHTMLで簡単にラップすることができます。

段落

$("p").wrapInner("<span></span>");

の内容を中心に、インライン要素（例えばスパン）を入れた場合にのみ、このような例のために、その特定のインライン要素にCSSを適用する必要があります。

p span { 
    background-color: black; 
    color: white; 
}

このソリューションを使用すると、HTMLを編集する必要はありません。