14

複数行のテキストに「background-color」プロパティを追加するというアイデアはありますか。2つの問題があります。

  • 各行の最後の単語の後で背景を停止する必要があります
  • 背景のない各行の間にスペースはありません

例 ：

ここに画像の説明を入力してください

ありがとう ！

4

7 に答える 7

19

これがあなたが探しているものだと思います：http://jsfiddle.net/9BTYQ/1/

span {
    color: white;
    background-color: #343132;
    box-shadow: 0.5em 0 0 #343132,-0.5em 0 0 #343132;
}

div {
    width: 100px;
}
<div>
    <span>Do you have an idea to add a background-color property on a multi-line text, with two difficulties:</span>
</div>

于 2012-10-03T13:21:31.340 に答える
10

box-shadow@gabitzish が示したソリューションは、IE11 および FF34+ (2014 年 9 月リリース) では正しく機能しなくなりました。

追加box-decoration-break:clone;して、IE11 および FF34+ でも動作させることができます。

p {
    display: inline;
    padding: 0.5em 0em;
    background-color: #FFAA3B;
    box-shadow: 1em 0 0 #FFAA3B, -1em 0 0 #FFAA3B;
    box-decoration-break: clone;
}

適切なプレフィックスを使用して、Webkit、Firefox、IE9+ で動作します。

デモ: http://jsfiddle.net/cLh0onv3/1/

注: これは別の場所で既に述べています。

于 2014-11-09T13:47:25.203 に答える
5

<p>このソリューションは、box-shadow メソッドと、要素の周囲の<span>要素の対応するパディングの組み合わせでうまく機能することがわかりました

p {
  display:block;
  padding:0 10px;
  font-size:2em;
}

span {
  color: white;
  background:#333;
  box-shadow: 0 0 0 10px #222;
  padding:0;
  line-height:1.5;
}

http://jsfiddle.net/tsoligo/mMg4B/

于 2013-09-05T22:25:24.693 に答える
3

表示ボックスのタイプをインラインに変更するだけです:

p {
  display: inline;
}


body {
  width: 170px;
}
p {
  display: inline;
  background: black;
  color: white;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

また、各行の間にスペースがある場合は、または vvfont-sizeに等しく設定します。line-height

于 2014-11-09T16:24:11.297 に答える
1

純粋なCSSで完璧にすることは難しく、特定の条件下でのみ達成できます。たとえば、区切りを使用して行の高さを大きく設定すると、間にギャップが表示されます。そして、側面の周りのパディングはどうですか？

また、スパンが必要になり、マークアップが醜くなります。

幸いなことに、Sam Croftは、これに対抗するための単純なjQueryプラグインを考案しました。速くて軽く、ほとんどの条件下で機能します。

記事：http ：//samcroft.co.uk/2011/jquery-plugin-for-inline-text-backgrounds/

デモ：http ：//samcroft.co.uk/demos/inline-backgrounds/

ソース：https ：//github.com/samcroft/css-inline-backgrounds/blob/master/inline-backgrounds.js

于 2012-10-03T13:27:36.920 に答える
0

<span>これはと<p>タグの違いの 1 つです。

<span style="background:black; color:white;">
Lorem Ipsum is simply dummy text of the<br>
printing and typesetting industry.<br>
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
<br> when an unknown printer took a galley of type
<br> and scrambled it to make a type specimen book.</span>
于 2012-10-03T13:22:18.157 に答える