我有背景色应用到<span>
标签,也有左和右padding
设置在它上。问题是:当文本在多行中换行时,padding
仅应用于<span>
的左侧(开始)和右侧(结束),而不应用于每行的左侧(开始)和右侧(结束)。
如何将左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>
发布于 2016-01-08 00:19:51
您可以使用值为clone
的box-decoration-break
属性。
box-decoration-break: clone;
每个长方体片段都是使用指定的边框、填充和边距包装每个片段而独立呈现的。边界半径、边界图像和长方体阴影独立地应用于每个片段。背景在每个片段中独立绘制,这意味着具有background-repeat: no-repeat的背景图像可以重复多次。- 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><span>The quick brown fox jumps over the lazy dog.</span></h1>
发布于 2016-01-08 00:30:43
Multi-line-padded-text by CSS Tricks拯救
HTML
<div class="padded-multiline">
<h1>
<strong>
How do I add padding to subsequent lines of an inline text element?
</strong>
</h1>
</div>
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;
}
注:感谢CSS Tricks的帮助,还有很多其他的技巧
发布于 2018-09-18 22:02:24
有点晚了,但是,您可以使用<p>
标记而不是<span>
,这将对所有行应用填充。
https://stackoverflow.com/questions/34659853
复制相似问题