0

段落内のテキスト行を強調表示（または背景に塗りつぶす）する方法を探しています。それが重要な場合、私はワードプレスで開発しています。

コード例は次のとおりです。

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

すべての行の背景を黒にして、テキストの長さだけにします。行は1つのPタグでのみ折り返されているため、各Pのスタイルを設定することはできません。

チュートリアルへのアイデア/リンクはありますか？各行をPにするためにjqueryに頼る必要はないと思いますが、それがオピトンの場合はそうします。

4

3 に答える 3

1

最も簡単な方法は、表示する段落を設定することです。インラインで背景色を追加します。ただし、各行の最後に改行を追加する必要があります。

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

段落は次のようになります。

<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>
于 2009-08-17T20:01:48.820 に答える
0

ブラウザは改行を単一のスペースとして扱うため、HTMLを変更する必要があります。

Javascriptで改行がどこにあるのか理解できるとは思いません。この場合、HTMLを自分で変更し、基本的にPatが提案したことを実行する必要があります。

于 2009-08-17T20:45:44.487 に答える
0

jqueryを使用すると、wrapInner関数を使用して特定のタグのコンテンツをHTMLで簡単にラップできます。

段落の内容の周りにインライン要素（たとえばスパン）を配置した場合

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

たとえば、このように、CSSをその特定のインライン要素に適用するだけで済みます。 

p span {
    background-color: black;
    color: white;
}
このソリューションを使用すると、HTMLを編集する必要はありません。

于 2009-11-24T19:34:38.743 に答える