如何对多行文本中的每一行应用填充？
如何对多行文本中的每一行应用填充？
提问于 2016-01-08 00:08:43
我有背景色应用到<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>
回答 5
Stack Overflow用户
回答已采纳
发布于 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>
Stack Overflow用户
发布于 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的帮助，还有很多其他的技巧
Stack Overflow用户
发布于 2018-09-18 22:02:24
有点晚了，但是，您可以使用<p>标记而不是<span>，这将对所有行应用填充。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34659853
复制相关文章
相似问题