0

I have several different spans all wrapped up in a single div and I'm trying to add background color that wraps close to the text instead of a block (rectangle) around the span. So, I'm using inline, but this then puts all the spans on the same line. How can I get this background effect but putting getting line breaks in between the spans. Note that I can't change the HTML, but I have full control over CSS.

body {
  background-color: red;
  color: #fff
}

#page {
  width: 800px;
}

.header-content {
  width: 500px;
}

h1.module_header,
.fullwidth_header_subhead,
.header_content_wrapper {
  display: inline;
  background: #292d31;
  box-shadow: 10px 0 0 #292d31, -10px 0 0 #292d31;
}
<body>
  <div id="page">
    <div class="header-content">
      <h1 class="module_header">
        This is the really long main title that can be many lines
      </h1>
      <span class="fullwidth_header_subhead">
            Here is a subhead that can also be multiple lines so this can wrap also
        </span>
      <div class="header_content_wrapper">
        <span>
                Here is a shorter line but could be multiple lines
            </span>
      </div>
    </div>
  </div>
</body>

You can see the result here: https://codepen.io/jonmrich/pen/gdjBbK

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
jonmrich
  • 4,233
  • 5
  • 42
  • 94

1 Answers1

0

One trick is to use the ::after pseudo-element to insert a line break character. You have to set white-space to pre in order for it to not collapse like other white space. The use of white-space: pre is credited to this answer by Adrift.

To add space between the lines, simply make the ::after pseudo-element display:block. That will add a line below the current line at the same font size as the element it is "after". Set the font-size property to equalize the height.

body {
  background-color: red;
  color: #fff
}

#page {
  width: 800px;
}

.header-content {
  width: 500px;
}

h1.module_header,
.fullwidth_header_subhead,
.header_content_wrapper {
  display: inline;
  background: #292d31;
  box-shadow: 10px 0 0 #292d31, -10px 0 0 #292d31;
}

h1.module_header::after,
.fullwidth_header_subhead::after,
.header_content_wrapper::after {
  content: '\0A';
  white-space: pre;
  display: block;
  font-size: 10px;
}
<body>
  <div id="page">
    <div class="header-content">
      <h1 class="module_header">
        This is the really long main title that can be many lines
      </h1>
      <span class="fullwidth_header_subhead">
        Here is a subhead that can also be multiple lines so this can wrap also
      </span>
      <div class="header_content_wrapper">
        <span>
          Here is a shorter line but could be multiple lines
        </span>
      </div>
    </div>
  </div>
</body>
Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
  • This seems to be working in my codepen, but for some reason not in my actual code. I think it's because my code doesn't really have a fixed width like this, so the breaks are in there like the pen, but the lines don't wrap inside the div. Is there a way to have both? – jonmrich Sep 15 '18 at 02:09
  • I'm not sure what you're saying. If you want a line to break, either the line must have a width longer than the available width, the line breaks must be in the HTML file and you can use `white-space: pre` to show them, or you have to add a line break element (`
    `) in the HTML.     – Heretic Monkey Sep 15 '18 at 02:18
  • Actually, I think I have this working...sorry for the confusion. My issue now is the the background are overlapping the lines above in different spans. I know you can't add ```margin-bottom``` when you do `display:inline`, but is there something equivalent that will work with the rest of this code? – jonmrich Sep 15 '18 at 02:21
  • You could try adding more line feeds (e.g., change the code to `content: '\0A\0A';`). – Heretic Monkey Sep 15 '18 at 02:23
  • ... but that might extend the background color further; never mind :). I'll update my question with a possible solution, – Heretic Monkey Sep 15 '18 at 02:31