如何应用填充到多行文本中的每一行? [英] How to apply padding to every line in multi-line text?
问题描述
我有背景颜色应用到< span>
标签,还有左和右 padding
在上面。问题是: padding
仅应用于< span> $ c $的左(开始)和右
如何应用左侧和右侧
h1 {font-重量: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> < / h1>
您可以使用值的
。 box-decoration-break
克隆
box-decoration-break:clone; code>
每个框碎片独立渲染指定的边框,填充和边缘包裹每个片段。 border-radius,border-image和box-shadow分别应用于每个片段。在每个片段中独立绘制背景,这意味着具有背景重复:无重复的背景图像可以重复多次。 - MDN
请参阅 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> ;
>
I have background color applied to the <span>
tag, there is also left and right padding
set on it. The problem is: the padding
is 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.
How can I apply the left and right padding
to the middle lines?
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>
You could use box-decoration-break
property with value of 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
See the current browser support tables at 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>
这篇关于如何应用填充到多行文本中的每一行?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!