CODEWITHSUNDEEP
htmlcsstextbackground-color
George
George

Reputation: 4257

Multi-line text background-color with CSS cuts off characters

I have multi-line text content (wrapped by the browser, not delimited by <br>) in an HTML document and want to add a background-color highlight. My first attempt was to wrap the text I wanted to highlight in a <span> and style it appropriately:

/* part of CSS Reset */
body { line-height: 1; }

#highlight {
  background-color: blue;
  color: white;
}
<p>Lorem ipsum <span id="highlight">dolor sit amet, consectetur adipiscing elit. Donec sed ipsum ut nulla tempus sodales. Aliquam augue nisl, cursus nec volutpat in, sagittis</span> in mi.

This renders as the following:

Poor text highlighting

Note how the bottom of characters with descenders ('g', 'p', ',') are cutoff where they appear to be overlapped by the background of the next line.

I tried to fix this with a transparent background, but it only served to better demonstrate the overlap:

/* part of CSS Reset */
body { line-height: 1; }

#highlight {
  background-color: rgba(0, 0, 255, 0.5);
  color: white;
}
<p>Lorem ipsum <span id="highlight">dolor sit amet, consectetur adipiscing elit. Donec sed ipsum ut nulla tempus sodales. Aliquam augue nisl, cursus nec volutpat in, sagittis</span> in mi.

same as above, but with a transparent background that is darker between lines

Alternatively, increasing the line-height seems to work:

#highlight {
  background-color: rgba(0, 0, 255, 0.5);
  color: white;
  line-height: 1.2em;
}
<p>Lorem ipsum <span id="highlight">dolor sit amet, consectetur adipiscing elit. Donec sed ipsum ut nulla tempus sodales. Aliquam augue nisl, cursus nec volutpat in, sagittis</span> in mi.

However, I need a way to fix this overlap issue without visually increasing the spacing between lines.

Upvotes: 6

Views: 1953

Answers (1)

George
George

Reputation: 4257

The fix that I found is to wrap the text in a second <span> and style that with position: relative. The outer span renders the background color in the same position, and then the inner span renders the text on top of it.

/* part of CSS Reset */
body { line-height: 1; }

#highlight {
  background-color: blue;
}

#highlight > span {
  position: relative;
  color: white;
}
<p>Lorem ipsum <span id="highlight"><span>dolor sit amet, consectetur adipiscing elit. Donec sed ipsum ut nulla tempus sodales. Aliquam augue nisl, cursus nec volutpat in, sagittis</span></span> in mi.

highlighted lines without any cutoff characters

Edit: Note how the "p" in "ipsum" is cut off. This can be fixed with even more <span>s:

/* part of CSS Reset */
body { line-height: 1; }

#highlight {
  background-color: blue;
}

#highlight > span {
  position: relative;
  color: white;
}

.no-highlight {
  position: relative;
}
<p><span class="no-highlight">Lorem ipsum </span><span id="highlight"><span>dolor sit amet, consectetur adipiscing elit. Donec sed ipsum ut nulla tempus sodales. Aliquam augue nisl, cursus nec volutpat in, sagittis</span></span> in mi.

Upvotes: 5

Related Questions