我有背景颜色应用于标签,也有左右
padding
设置.问题是:当文本被包裹在几行上时,仅应用于每行padding
的左(开始)和右(结束),而不是左(开始)和右(结束).
如何将左右两侧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;
}
The quick brown fox jumps over the lazy dog.
您可以使用box-decoration-break
值为的属性clone
.
box-decoration-break: clone;
每个盒子片段都是独立呈现的,每个片段都有指定的边框,填充和边距.border-radius,border-image和box-shadow独立应用于每个片段.在每个片段中独立地绘制背景,这意味着具有背景重复:无重复的背景图像可以重复多次.- MDN
请参阅caniuse.com上的当前浏览器支持表
jsFiddle例子
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;
}
The quick brown fox jumps over the lazy dog.
CSS的多行填充文本技巧拯救
HTML
How do I add padding to subsequent lines of an inline text element?
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:感谢CSS Tricks,以及其他许多技巧