ちょうどCSSを使用してテキストのすべての単語の背後にある背景を変更するには？

-1

私はスタイリングクォートに興味があり、その中のすべての単語を背景色で強調表示しています。堅実な背景の問題は、色の隙間がないことです。 thisのような結果を得るために何をすることができますか？すべての単語が強調表示されている場合ちょうどCSSを使用してテキストのすべての単語の背後にある背景を変更するには？

出典

2017-01-05 IHEWAZ

hii ... htmlとcssコードを含む –

こんにちは、私は解決策がまだありません。テキストはサーバ上のdbからのランダムな仮定になります。私はどのコードを含めるべきか分かりません） – IHEWAZ

別のコードサービスですか？ –

最大幅が&の段落内の単一のスパンに対して、背景色を使用できます。

HTML：

<p> 
    <span>If it scares you, it might be a good thing to try it.</span> 
</p>

CSS：

p { 
    line-height: 2; 
    max-width: 100px; 
} 

p span { 
    background: red; 
}

ライブ例： https://codepen.io/guidobouman/pen/rjaJap

説明：スパンはインライン要素です。インライン要素の背景は、実際の線の後ろにのみ表示されます。包含する要素の線の高さを大きくすると、背景の間のスペースが表示されます。

出典

2017-01-05 13:32:01

縦列の場合の解決、ありがとう） – IHEWAZ

しかし、私はまだ水平ワードアライメントのためにこのようなエレガントなものを探しています – IHEWAZ

残念ながらそれは不可能です。あなたは別のスパンでそれを分割する必要があります。 –

<p> 
    <span>Hi</span> 
    <span>I</span> 
    <span>am</span> 
    <span>Naveed</span> 
    <span>Ramzan</span> 
</p> 
<style> 
    p span:nth-child(1){background: red;} 
    p span:nth-child(2){background: blue;} 
    p span:nth-child(3){background: black;} 
    p span:nth-child(4){background: white;} 
    p span:nth-child(5){background: orange;} 
</style>

これを試してみてください。

ところで、PHPやasp.netのようなスクリプト言語を使用している場合は、ループを使用して背景色を設定できます。

出典

2017-01-05 13:17:00

問題は、内にランダムな量の単語があることを前提としているので、私はスタイリングプロセスを自動化するかもしれません – IHEWAZ

ああ、私はPHPの詳細を参照してください、しかし私は固体のCSSでそれを行うことができますか？ – IHEWAZ

PHP/asp.netを使用していない場合は、Javaスクリプトを使用している可能性があります –

ちょうどCSSを使用してテキストのすべての単語の背後にある背景を変更するには？

答えて

関連する問題