Keeping the background-colour from the text

Question

I have a lines of text on my page which have a background colour, but the problem was where the line broke, the letter touched the side of the background colour, looking messy. I sorted this problem by adding  . The problem with this was as soon as you adjusted the view port, the line would break somewhere else, and I would also have an extra space where I added the  .

How do I give the text padding where the line breaks which works responsively?

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

What you're looking for is the box-decoration-break property.

In principle, all you need is some padding to the span and the box-decoration-break set to clone to copy the padding to each line instead of applying it only to the beginning and end.

Now your original example doesn't show any background, so I'm going to assume the background is supposed to be yellow . So then we get

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

or, in practice,

 .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>

Which, in compliant browsers, results in

whereas without box-decoration-break , it would have looked like this:

Edit:
This works in Chrome v22 and up (with the -webkit- prefix) and Firefox v32 and up. Not in IE though.

Answer 2

how about using this -

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

but this one applies padding at particular resolution, not when the line breaks. If you can adjust that to the screen width at which the line breaks, then it will work perfect!

Demo