How to apply padding to multiple lines in CSS

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:
…


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.

Related Posts