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

一尘不染

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

css

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

阅读 380

2020-05-16

共1个答案

一尘不染

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

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>

2020-05-16