如何在多行文本的每一行中使用填充？

  • Z时代
  • 2024-01-10
  • 分类：问答

我将背景色应用到了<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>

回答：

您可以使用box-decoration-break值为的属性clone。

每个框片段都使用指定的边框进行独立渲染，并用边距和边距包裹每个片段。边界半径，边界图像和框阴影分别应用于每个片段。在每个片段中独立绘制背景，这意味着具有背景重复：不重复的背景图像可以重复多次。-

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>

以上是 如何在多行文本的每一行中使用填充？ 的全部内容， 来源链接： utcz.com/qa/402220.html

回到顶部