How to apply padding to multiple lines in CSS

This content originally appeared on flaviocopes.com and was authored by flaviocopes.com

While re-designing some aspect of this blog I had the need to add some padding to each line of each blog post title.

I had this HTML:

<h1 class="post-title">
  <span>{{ .Title }}</span>
</h1>

I added this CSS:

.post-title span {
  padding: 0px 30px;
  background-color: rgb(254,207,12);
}

and obviously it work, it added a 30px padding at the left and right side of the article title, as you can see thanks to the yellow background:

But with a longer title, and the text flowing to a new line, I experienced a problem because the padding was not applied at the end of each line:

See? There’s no padding before the A letter in the second line, and after the semicolon on the first line.

To fix that, I used this CSS property called box-decoration-break with the value clone, and its -webkit- prefixed property for Safari:

-webkit-box-decoration-break: clone;
box-decoration-break: clone;

Then it worked fine, across all browsers:

This content originally appeared on flaviocopes.com and was authored by flaviocopes.com

Print Share Comment Cite Upload Translate Updates

APA

flaviocopes.com | Sciencx (2021-04-06T05:00:00+00:00) How to apply padding to multiple lines in CSS. Retrieved from https://www.scien.cx/2021/04/06/how-to-apply-padding-to-multiple-lines-in-css/

MLA

" » How to apply padding to multiple lines in CSS." flaviocopes.com | Sciencx - Tuesday April 6, 2021, https://www.scien.cx/2021/04/06/how-to-apply-padding-to-multiple-lines-in-css/

HARVARD

flaviocopes.com | Sciencx Tuesday April 6, 2021 » How to apply padding to multiple lines in CSS., viewed ,<https://www.scien.cx/2021/04/06/how-to-apply-padding-to-multiple-lines-in-css/>

VANCOUVER

flaviocopes.com | Sciencx - » How to apply padding to multiple lines in CSS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/04/06/how-to-apply-padding-to-multiple-lines-in-css/

CHICAGO

" » How to apply padding to multiple lines in CSS." flaviocopes.com | Sciencx - Accessed . https://www.scien.cx/2021/04/06/how-to-apply-padding-to-multiple-lines-in-css/

IEEE

" » How to apply padding to multiple lines in CSS." flaviocopes.com | Sciencx [Online]. Available: https://www.scien.cx/2021/04/06/how-to-apply-padding-to-multiple-lines-in-css/. [Accessed: ]

rf:citation

» How to apply padding to multiple lines in CSS | flaviocopes.com | Sciencx | https://www.scien.cx/2021/04/06/how-to-apply-padding-to-multiple-lines-in-css/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.