使用 CSS 在带有填充的文本上创建突出显示效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6140498/
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
Creating highlight effect on text with padding using CSS
提问by Andy
I am trying to create highlighted text effect with line break(s).
我正在尝试使用换行符创建突出显示的文本效果。
Example:
例子：
I cannot figure out how to add padding to the text. Here is the CSS for the span element that contains the text:
我无法弄清楚如何向文本添加填充。这是包含文本的 span 元素的 CSS：
background: none repeat scroll 0 0 #1B1615;
display: inline;
font-size: 15px;
line-height: 24px;
padding-left: 5px;
When adding padding it only adds padding to beginning of the text and the end, as seen here:
添加填充时，它只会在文本的开头和结尾添加填充，如下所示：
CSS:
CSS：
background: none repeat scroll 0 0 #1B1615;
display: inline;
font-size: 15px;
line-height: 3em;
padding: 10px;
Does anybody have any idea on how to make this happen?
有没有人知道如何做到这一点？
回答by Brandon Webster
I had this same question and I did some hunting and found a pure CSS solution this that only requires a little bit of CSS: CSS create padding before line-break
我有同样的问题，我做了一些搜索，找到了一个纯 CSS 解决方案，它只需要一点点 CSS：CSS create padding before line-break
The basic solution is using padding on top and bottom and a solid box shadow to pad the left and right sides of the text, like this:
基本的解决方案是在顶部和底部使用填充，并使用实心框阴影来填充文本的左侧和右侧，如下所示：
.highlight {
color:#fff;
background:#000;
box-shadow:5px 0 0 #000, -5px 0 0 #000;
padding: 5px 0;
}
回答by Bit32
Here's a method of achieving a multi-line, padded, highlight behavior for text using just CSS.
这是一种仅使用 CSS 实现文本的多行、填充、突出显示行为的方法。
This is based on the box-shadow method found elsewhere, however as of Firefox 32 the traditional box-shadow solution no longer renders correctly.
这是基于其他地方的 box-shadow 方法，但是从 Firefox 32 开始，传统的 box-shadow 解决方案不再正确呈现。
Reviewing the changelog for FF32 I found there's a new property: box-decoration-break that causes the breakage.
查看 FF32 的变更日志，我发现有一个新属性：导致损坏的 box-decoration-break。
This property defaults to 'split' but needs to be specified as 'clone' to achieve the desired multiline padding effect.
此属性默认为 'split'，但需要指定为 'clone' 以实现所需的多行填充效果。
For more info see: https://developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break
有关更多信息，请参阅：https: //developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break
.box {
width: 50rem;
margin: 1rem auto;
font-family: arial, verdana, sans-serif;
}
h1 {
color: white;
font-size: 2.5rem;
line-height: 4rem; /* reduce size to remove gap between text */
margin: 0px;
}
h1 span {
background-color: #A8332E;
padding: 0.5rem 0;
-webkit-box-shadow: 1rem 0px 0px #A8332E, -1rem 0px 0px #A8332E;
box-shadow: 1rem 0px 0px #A8332E, -1rem 0px 0px #A8332E;
-webkit-box-decoration-break:clone;
-moz-box-decoration-break:clone;
box-decoration-break: clone;
}<div class="box">
<h1>
<span>Multi-line, padded, highlighted text that display properly in Firefox using box-decoration-break: clone</span>
</h1>
</div>回答by Adrian Macneil
Building on Brandon's solution, I figured out you can actually avoid the padding altogether and do it purely using box-shadow's spread option, and the padding on wrapped inline elements behaves as you expect.
基于 Brandon 的解决方案，我发现您实际上可以完全避免填充，而完全使用 box-shadow 的spread option 来完成，并且包裹的内联元素上的填充的行为符合您的预期。
.highlight {
background: black;
color: white;
box-shadow: 0 0 0 5px black;
}
回答by Cameron
Just add:
只需添加：
If space in the text area is all you are looking for.
如果文本区域中的空间就是您要查找的全部内容。
回答by Wolfgang Criollo
you can use box-decoration-break
你可以使用box-decoration-break
-moz-box-decoration-break:clone;
-webkit-box-decoration-break:clone;
box-decoration-break:clone;
working sample codepen
工作示例代码笔
回答by Obewan
If this is a "title" or something similar and it wraps because the container is fluid, why not set the background color on the container, then when/if your text/title wraps, all of the space between the lines of text, as well as the text line length, will appear to be the same.
如果这是一个“标题”或类似的东西，并且因为容器是流体而包裹起来，为什么不在容器上设置背景颜色，那么当/如果您的文本/标题包裹时，文本行之间的所有空间，如以及文本行长度，看起来是一样的。
<html>
<head><title>...blah...blah</title>
<style type="text/css" title="text/css">
#masthead{
background-color:black;
color: white;
}
#masthead h1{
text-transform:uppercase;
}
#container{
background-color:red;
}
</style>
</head>
<body>
<div id="container">
<div id="masthead">
<h1>some sort of title goes here</h1>
</div>
</div>
</body>
</html>
Additionally, you can probably just enhance the text in the h1 tag with margin/padding styles to get the appearance you are after.
此外，您可能只需使用边距/填充样式来增强 h1 标签中的文本，以获得您想要的外观。
回答by Dmitry Negoda
Add padding for the surrounding block-level element (e.g. div or td) and remove the padding from your span.
为周围的块级元素（例如 div 或 td）添加填充并从您的跨度中删除填充。
