How to apply padding to every line in multi-line text?

by

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>

More Related Contents:

  1. Bad: [html] in html code i can’t make two form input in one row [closed]
  2. Bold tag breaking the divs?
  3. Font Awesome 5 on pseudo elements shows square instead of icon
  4. Center image horizontally within a div
  5. How to change the height of a ?
  6. css ellipsis on second line
  7. How can you customize the numbers in an ordered list?
  8. Is it bad to use !important in a CSS property?
  9. Style input element to fill remaining width of its container
  10. How to make a whole ‘div’ clickable in html and css without JavaScript? [duplicate]
  11. Can a span be closed using ?
  12. Stop CSS transition from firing on page load
  13. How to specify the order of CSS classes?
  14. Using :after to clear floating elements
  15. Bootstrap 3 – How to maximize input width inside navbar
  16. 404 page not found – Go rendering css file
  17. How can I resize an image to a percentage of itself with CSS?
  18. HTML/CSS: Make a div “invisible” to clicks?
  19. css single or multiple line vertical align
  20. Center a large image of unknown size inside a smaller div with overflow hidden
  21. How to change border color of textarea on :focus
  22. Change the color of glyphicons to blue in some- but not at all places using Bootstrap 2
  23. Is there any way to add padding to select options via CSS?
  24. CSS Selector for No-Children-But-Not-Empty
  25. Font Awesome & Unicode
  26. How to make one span both columns in a two column table?
  27. CSS crop string in the middle
  28. Change image on hover
  29. Why does a border increase the element’s width?
  30. What does “semantically correct” mean?

Leave a Comment