CSS:多行文字的背景色？

Question

您是否有想法在多行文本上添加"背景颜色"属性,有两个困难:

• 背景必须在每行的最后一个单词后停止
• 没有背景的每一行之间没有空格

示例:

谢谢 !

Answer 1

我想这就是你要找的: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>   

Answer 2

box-shadow@gabitzish所示的解决方案在IE11和FF34 +(2014年9月1日发布)中停止正常工作.

您可以添加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/

注意:已经在别处说过了.

Answer 3

我发现这个解决方案可以很好地结合 box-shadow 方法和<p>元素周围<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/