保留文本的背景颜色

Question

我的页面上有一行文字有背景颜色，但问题是线条断了，字母碰到了背景颜色的一侧，看起来很乱。我通过添加对这个问题进行了排序。这样做的问题是，一旦您调整了视口，该行就会在其他地方断开，而且我还会有一个额外的 space，我在其中添加了 .

如何在换行符处给文本填充以响应式工作？

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

保留文本的背景颜色

Keeping the background-colour from the text

html

css

padding

background-color