Menu
I have background color applied to the <span> tag, there is also left and right padding set on it. The problem is: the padding is applied only to the left (beginning) and right (ending) of the <span>, not the left (beginning) and right (ending) of each line when the text is wrapped on several lines.
How can I apply the left and right padding to the middle lines?
h1 {
font-weight: 800;
font-size: 5em;
line-height: 1.35em;
margin-bottom: 40px;
color: #fff;
}
h1 span {
background-color: rgba(0, 0, 0, 0.5);
padding: 0 20px;
}<h1><span>The quick brown fox jumps over the lazy dog.</span></h1>
672
auto is not a valid value for padding property, the only thing you can do is take out padding: 0; from the * declaration, else simply assign padding to respective property block.
When the text in a single table cell exceeds a few words, a line break (<BR>) may improve the appearance and readability of the table. The line break code allows data to be split into multiple lines. Place the line break code <BR> within the text at the point(s) you want the line to break.
We use the word–break property in CSS that is used to specify how a word should be broken or split when reaching the end of a line. The word–wrap property is used to split/break long words and wrap them into the next line.
Right-click the selection rectangle of the shape or text box you want to change. On the shortcut menu, click Format <object type>, and then click the Text Box tab. Under Text Box Margins, adjust the measurements to increase or decrease the distance between the text and the outer border of the text box or a shape.
You could use box-decoration-break property with value of clone.
box-decoration-break: clone;Each box fragment is rendered independently with the specified border, padding and margin wrapping each fragment. The border-radius, border-image and box-shadow, are applied to each fragment independently. The background is drawn independently in each fragment which means that a background image with background-repeat: no-repeat may be repeated multiple times. - MDN
See the current browser support tables at caniuse.com
jsFiddle example
h1 { font-weight: 800; font-size: 5em; line-height: 1.35em; margin-bottom: 40px; color: #fff; } h1 span { background-color: rgba(0, 0, 0, 0.5); padding: 0 20px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }<h1><span>The quick brown fox jumps over the lazy dog.</span></h1>Multi-line-padded-text by CSS Tricks to the rescue
The HTML
<div class="padded-multiline">
<h1>
<strong>
How do I add padding to subsequent lines of an inline text element?
</strong>
</h1>
</div>
The CSS
.padded-multiline {
line-height: 1.3;
padding: 2px 0;
border-left: 20px solid #c0c;
width: 400px;
margin: 20px auto;
}
.padded-multiline h1 {
background-color: #c0c;
padding: 4px 0;
color: #fff;
display: inline;
margin: 0;
}
.padded-multiline h1 strong {
position: relative;
left: -10px;
}
NB: thanks to CSS Tricks for this, and so many other tips
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
