保留文字

Question

我的页面上有一行文字背景颜色，但问题是这条线断了，字母碰到背景颜色的一边，看起来很乱。我通过添加 对此问题进行了排序。问题是，只要你调整了视口，这条线就会在其他地方断开，而且我还有一个额外的空间，我添加了 。

如何在换行符的换行符处提供文本填充？

HTML

<div id="form" class="wrapper wrapper__content bg-img__text-wrapper">
   <h2 class="wrapper--heading-h2 heading--white">Message me</h2>   
   <p>
   <span class="bg-img__span span--bw">Feel free to message myself if you want to discuss a potential website project, or if you are an employer looking for &nbsp; &nbsp; an enthusatic, confident, front-end developer and are happy with the skills I have to offer.</span>
   </p>
</div>

CSS

.bg-img__text-wrapper p, .bg-img__text-wrapper h1 {
text-transform: uppercase;
letter-spacing: .15rem;
line-height: 4rem;
}

Answer 1

您正在寻找的是box-decoration-break属性。

原则上，您只需要填充跨度并将box-decoration-break设置为clone即可将填充复制到每一行，而不是仅将其应用于开头和结尾。

现在你的原始示例没有显示任何背景，所以我假设背景应该是yellow。那么我们得到

span {
    padding:0 1em;
    box-decoration-break:clone;
    background:yellow;
}

或者，在实践中，

.bg-img__text-wrapper p,
.bg-img__text-wrapper h1 {
  text-transform: uppercase;
  letter-spacing: .15rem;
  line-height: 4rem;
}
.bg-img__text-wrapper p .bg-img__span.span--bw {
  padding: 0 1em;
  -webkit-box-decoration-break: clone;
  -o-box-decoration-break: clone;
  box-decoration-break: clone;
  background: yellow;
}

<div id="form" class="wrapper wrapper__content bg-img__text-wrapper">
  <h2 class="wrapper--heading-h2 heading--white">Message me</h2> 
  <p>
    <span class="bg-img__span span--bw">Feel free to message me if you
      want to discuss a potential website project, or if you are an
      employer looking for an enthusiastic, confident, front-end
      developer and are happy with the skills I have to offer.</span>
  </p>
</div>

在兼容的浏览器中，结果为

而没有box-decoration-break，它看起来像这样：

编辑：
这适用于Chrome v22及更高版本（带有-webkit-前缀）和Firefox v32及更高版本。虽然不在IE浏览器中。

Answer 2

如何使用它 -

@media all and (max-width: 700px) {
    .bg-img__text-wrapper p /* or whatever */ {
        padding: 0 10px;
    }
}

但是这个应用特定分辨率的填充，而不是在换行时。如果你可以将其调整到换行的屏幕宽度，那么它将完美无缺！

Demo