CSS：多行文本的背景颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12709313/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: Background-color on multi-line text?
提问by user1677010
Do you have an idea to add a "background-color" property on a multi-line text, with two difficulties:
您是否有想法在多行文本上添加“背景颜色”属性，有两个困难：
- Background must stop after the last word of each line
- No space between each line without background
- 背景必须在每行的最后一个字之后停止
- 没有背景的每行之间没有空格
Example :
例子 ：
Thanks !
谢谢 ！
回答by gabitzish
I think this is what you are looking for: http://jsfiddle.net/9BTYQ/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> 回答by gabssnake
The box-shadowsolution as shown by @gabitzish stopped working properly in IE11 and FF34+ (released 09-2014).
box-shadow@gabitzish 所示的解决方案在 IE11 和 FF34+（2014 年 9 月发布）中停止正常工作。
You can add box-decoration-break:clone;to make it work in IE11 and FF34+ too:
您也可以添加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;
}
Works in Webkit, Firefox, IE9+ with proper prefixes.
使用适当的前缀在 Webkit、Firefox、IE9+ 中工作。
Demo : http://jsfiddle.net/cLh0onv3/1/
演示：http: //jsfiddle.net/cLh0onv3/1/
Note: Already stated this elsewhere.
注意：已经在别处说明了这一点。
回答by user2752422
I've found this solution works nicely with a combination of the box-shadow method and some corresponding padding on a <p>element around the <span>element
我发现这个解决方案可以很好地结合 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;
}
回答by NGLN
Just change the display box type to inline:
只需将显示框类型更改为内联：
p {
display: inline;
}
body {
width: 170px;
}
p {
display: inline;
background: black;
color: white;
}<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>And if there is space between each line, then set font-sizeequal to line-height, or v.v.
如果每行之间有空格，则设置font-size等于line-height，或 vv
回答by amustill
Getting it perfect with pure CSS is difficult and only achievable under certain conditions. For example, if you use breaks and set the line-height to big, you'll see gaps in between. And what about the padding around the sides?
使用纯 CSS 实现完美是很困难的，并且只有在特定条件下才能实现。例如，如果您使用中断并将行高设置为大，您将看到两者之间的间隙。那么两侧的填充呢？
Also, you'll need spans and that will just uglify your markup.
此外，您将需要跨度，这只会使您的标记变得丑陋。
Luckily Sam Croft came up with a simple jQuery plugin to counter this. It's quick, light and works under most conditions.
幸运的是 Sam Croft 想出了一个简单的 jQuery 插件来解决这个问题。它快速、轻便并且在大多数情况下都能工作。
Article: http://samcroft.co.uk/2011/jquery-plugin-for-inline-text-backgrounds/
文章：http: //samcroft.co.uk/2011/jquery-plugin-for-inline-text-backgrounds/
Demo: http://samcroft.co.uk/demos/inline-backgrounds/
演示：http: //samcroft.co.uk/demos/inline-backgrounds/
Source: https://github.com/samcroft/css-inline-backgrounds/blob/master/inline-backgrounds.js
来源：https: //github.com/samcroft/css-inline-backgrounds/blob/master/inline-backgrounds.js
回答by Darshan Thanki
This is one of the difference between <span>and <p>tags.
这是<span>和<p>标签的区别之一。
<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>
回答by Andrii Verbytskyi
This box-shadowExample works just great:
这个box-shadow例子很好用：
HTML
HTML
<p class="title step-1">
<span class="highlight">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, qui suscipit error quasi tempore magni sit nostrum aliquam soluta vel. Dolorem, reprehenderit sint molestiae in est perspiciatis quas accusantium commodi. </span>
</p>
CSS
CSS
.title {
font: 20px/1.25 Ubuntu, sans-serif;
text-transform: uppercase;
margin-bottom: 1rem;
line-height: 45px;
display: inline-block;
width: 300px;
}
.title .highlight {
display: inline;
background: #ee4035;
color: white;
padding: 0.5rem;
padding-left: 0;
padding-right: 0;
}
.title.step-1 .highlight {
box-shadow: 10px 0 0 #ee4035, -10px 0 0 #ee4035;
}
JSFiddle:http://jsfiddle.net/verber/WmRT3/
JSFiddle：http : //jsfiddle.net/verber/WmRT3/
P.S. But not in IE8...
PS 但不是在 IE8 中...
