How can I make padding apply to wrapped text with CSS? - css

Question

I have a minimal example here: https://codepen.io/cpcpcpcpcpx/pen/VwZWoyJ
Containing the following:
.wrapper {
width: 200px;
}
h1 {
font-size: 32px;
font-family: Tahoma, Helvetica, sans-serif;
line-height: 50px;
}
.header-text {
background: #aabbcc;
padding-left: 20px;
padding-right: 20px;
border-radius: 6px;
}
<div class='wrapper'>
<h1>
<span class='header-text'>
Long text that wraps
</span>
</h1>
</div>
The horizontal padding only applies to the very beginning and end of the text where it wraps, but I want it to apply on every line. I'm OK with the border-radius not being at the line-break points of every line, but I need the padding to apply.
If I put padding-top into the .header-text class that applies to both lines, so I'm unclear why the points where lines wrap ignore the horizontal padding options.
Is there a way to do this in CSS?

Answer 1

What you want can be achieve using box-decoration-break and it will even work with border-radius:
.wrapper {
width: 200px;
}
h1 {
font-size: 32px;
font-family: Tahoma, Helvetica, sans-serif;
line-height: 50px;
}
.header-text {
background: #aabbcc;
padding-left: 20px;
padding-right: 20px;
border-radius: 6px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
<div class='wrapper'>
<h1>
<span class='header-text'>
Long text that wraps
</span>
</h1>
</div>

Answer 2

You should change .header-text display to either block or inline-block

Answer 3

you could try in another way
.header-text {
padding: 0;
word-spacing: 5px;
}

Answer 4

May it will help u out. Increase the width of the .wrapper so the padding will apply.
HTML PAGE
<div class='wrapper'>
<h1>
<span class='header-text'>
Long text that wraps
</span>
</h1>
</div>
CSS Page
.wrapper {
width: 500px;
}
h1 {
font-size: 32px;
font-family: Tahoma, Helvetica, sans-serif;
line-height: 50px;
}
.header-text {
background: #aabbcc;
padding-left: 20px;
padding-right: 20px;
border-radius: 6px;
padding-top:12px;
padding-bottom:12px
}