Html 如何将填充应用于多行文本中的每一行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34659853/
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
How to apply padding to every line in multi-line text?
提问by user3550879
I have background color applied to the <span>tag, there is also left and right paddingset on it. The problem is: the paddingis applied only to the left (beginning) and right (ending) of the <span>, not the left (beginning) and right (ending) of each line when the text is wrapped on several lines.
我已将背景颜色应用于<span>标签，并padding在其上设置了左右。问题是：当文本在几行上换行时， thepadding仅应用于 的左侧（开始）和右侧（结束），而<span>不是每行的左侧（开始）和右侧（结束）。
How can I apply the left and right paddingto the middlelines?
如何将左右padding应用于中间线？
h1 {
font-weight: 800;
font-size: 5em;
line-height: 1.35em;
margin-bottom: 40px;
color: #fff;
}
h1 span {
background-color: rgba(0, 0, 0, 0.5);
padding: 0 20px;
}<h1><span>The quick brown fox jumps over the lazy dog.</span></h1>回答by Stickers
You could use box-decoration-breakproperty with value of clone.
您可以使用box-decoration-break值为clone.
box-decoration-break: clone;Each box fragment is rendered independently with the specified border, padding and margin wrapping each fragment. The border-radius, border-image and box-shadow, are applied to each fragment independently. The background is drawn independently in each fragment which means that a background image with background-repeat: no-repeat may be repeated multiple times. - MDN
box-decoration-break: clone;每个框片段都使用指定的边框、填充和边距包裹每个片段独立渲染。border-radius、border-image 和 box-shadow 分别应用于每个片段。背景是在每个片段中独立绘制的，这意味着具有 background-repeat: no-repeat 的背景图像可能会重复多次。- MDN
See the current browser support tables at caniuse.com
请参阅caniuse.com 上的当前浏览器支持表
h1 {
font-weight: 800;
font-size: 5em;
line-height: 1.35em;
margin-bottom: 40px;
color: #fff;
}
h1 span {
background-color: rgba(0, 0, 0, 0.5);
padding: 0 20px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}<h1><span>The quick brown fox jumps over the lazy dog.</span></h1>回答by stephenmurdoch
Multi-line-padded-textby CSS Tricks to the rescue
CSS Tricks 的多行填充文本
The HTML
HTML
<div class="padded-multiline">
<h1>
<strong>
How do I add padding to subsequent lines of an inline text element?
</strong>
</h1>
</div>
The CSS
CSS
.padded-multiline {
line-height: 1.3;
padding: 2px 0;
border-left: 20px solid #c0c;
width: 400px;
margin: 20px auto;
}
.padded-multiline h1 {
background-color: #c0c;
padding: 4px 0;
color: #fff;
display: inline;
margin: 0;
}
.padded-multiline h1 strong {
position: relative;
left: -10px;
}
NB: thanks to CSS Tricksfor this, and so many other tips
注意：感谢CSS Tricks和许多其他技巧
回答by zefram
A bit late to the party, but, you could use a <p>tag instead of a <span>, that will apply the padding to all lines.
聚会有点晚了，但是，您可以使用<p>标记而不是<span>，这会将填充应用于所有行。
回答by Narendher Reddy Yelala
Try the below single-line statement for paragraph or label by setting line-height.
通过设置line-height.
line-height: 1.3;
回答by Tristanisginger
you may just be able to display: blockor display: inline-block
你可能只是能够display: block或display: inline-block
