保持文本的背景颜色

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属性。

原则上，您只需要对 span 进行一些填充，并将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;
    }
}

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

演示