text background new line padding issue

Question

I am dealing with text blocks (background blocks over text) and face some issues with paddings on new line. The problem occurs when the browser(e.g. mobile) cuts the text into to two lines due to lack of width. text then looks like this:

I don't really know how to set a padding css on the end of the new lines, since it could break up anywhere of the sentence. You could say put a span on it with padding, but it is not fixed where the line will break down. It depends on the width. Any recommendations?

plz tell me how to add margin to breakpoints then. There is no fixed breakpoint, it differs depending on the width — Tina Florijn, Apr 30 '17 at 08:28
I already tried p tag but then the entire block get one background as a square — Tina Florijn, Apr 30 '17 at 08:30
This could be a tricky one to solve without JavaScript. Here's a fiddle for experimentation: https://codepen.io/Kaivosukeltaja/pen/ybbJGE — Kaivosukeltaja, Apr 30 '17 at 09:12
apparently this could work, as seen in another post https://stackoverflow.com/a/19377279/18166526 — Pedro F, Jun 12 '22 at 06:15

Kaivosukeltaja · Accepted Answer · 2017-04-30T10:10:08.177

You could apply display: inline-block but that will turn the background color into an ugly box which doesn't look as nice as having an exact width background for each line. Unfortunately CSS doesn't let us target individual lines except for the first one.

If you don't mind getting a little "creative" (or hacky) you could wrap each word in its own element in the backend or using JavaScript and apply the background color to those elements. Adjust the parent's word-spacing accordingly to eliminate gaps.

.main {
  font-family: sans-serif;
  font-weight: bold;
  background-color: #99c;
  display: flex;
  height: 400px;
  flex-direction: row;
  align-items: center;
}

.text-container {
  max-width: 500px;
  display: inline-block;
  word-spacing: -15px;
  position: relative;
  padding-left: 20px;
  overflow: hidden;
}

.text-container::before {
  content: '';
  background-color: black;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 100%;
  z-index: 1;
}

span {
  font-size: 36px;
  line-height: 1.5em;
  color: white;
  background-color: black;
  padding: 0.25em 0.5em 0.25em 0;
  max-width: 360px;
}

<div class="main">
  <div class="text-container">
    <span>A</span> <span>Movie</span> <span>in</span> <span>the</span> <span>park:</span> <span>Kung</span> <span>Fu</span> <span>Panda</span>
  </div>
</div>

this works great for solid colors! but when I try to replace the background color with some transaparant rgba it overlaps the color and becomes black at crosspoints. Any fix for this? https://jsfiddle.net/djh4mLbu/ — Tina Florijn, Apr 30 '17 at 13:28
@TinaFlorijn: sure there is a fix, but not a pretty one. Let's render the text twice - first with a solid black background and give its container a lower opacity. Then a second time with just the text at full opacity. https://jsfiddle.net/djh4mLbu/1/ — Kaivosukeltaja, Apr 30 '17 at 14:15

Otis Feru · Answer 2 · 2022-12-13T22:20:37.863

1

You can use box-shadow for this issue and display inline:

<div class="text">
    <span class="text-container">A Movie in the park: Kung Fu Panda</span>
</div>

And css:

.text > span {
    display: inline;
    box-shadow: 25px 0 0 black, -10px 0 0 black;
    background-color: black;
    color: white;            
}

edited Dec 13 '22 at 22:20

answered May 10 '22 at 10:15

Otis Feru

111
1
4

This one actually works. Don't add any left/right padding or you will again have multi-line issues. – yellow-saint Nov 15 '22 at 15:26

score 0 · Answer 3 · answered Apr 30 '17 at 08:58

0

Try to add   after "Park:" and before "Kung"

answered Apr 30 '17 at 08:58

Ravi Ubana

397
5
26

score 0 · Answer 4 · answered Apr 30 '17 at 09:17

padding workded!!! change width by console browser and see result:

h1{
    background-color: #ff6a6a;
    padding: 33px;
    display: inline-block;
    word-wrap: break-word;
    width:300px
}

<h1>rert ert erttttttttttttttt 00000000000000000000 dfgdfgd dfgdfgdft ertert  </h1>

score -1 · Answer 5 · answered Apr 30 '17 at 17:07

Use <p> tag to wrap up the text and it apparently works demo

<div class="main">
  <div class="text-container">
    <p id="test">A Movie in the park: Kung Fu Panda</p>
  </div>
</div>

css

.main {
  font-family: sans-serif;
  font-weight: bold;
  background-color: #99c;
  display: flex;
  height: 400px;
  flex-direction: row;
  align-items: center;
}

.text-container {
  max-width: 400px;
}

p {
  font-size: 36px;
  line-height: 2em;
  color: white;
  background-color: black;
  padding: 0.5em;
  max-width: 360px;
}

text background new line padding issue

5 Answers5