Background-color covers previous line - html

Question

How to fix background-color that covers previous line of text (see: http://jsfiddle.net/3uzbV/41/).
div {
font-family: Charis, serif;
font-size: 1.5em;
line-height: 0.8em;
text-align: justify;
}
span {
background-color: red;
}
<div> firstString <span> secoundString </span> thirdString </div>

Answer 1

Nest the text inside another element inside that red span (here i've used a b). That get's us close but there's still an issue with the red bg obscuring the white bg text above it. To resolve that I've used mix-blend-mode (which is not currently supported in IE)
div {
font-family: Charis, serif;
font-size: 1.5em;
line-height: 0.8em;
text-align: justify;
}
span {
background-color: red;
display: inline;
position: relative;
mix-blend-mode: multiply;
}
span b {
display: inline;
position: relative;
font-weight: normal;
}
<div>... ze cztery. Tymczasem na swym dworze. Nikt go przez okienic szpar i kłopotach, i stanęli kołem. W biegu dotknęła blisko dwadzieści i bawi się strzelbami a Pan świata wie, jak zdrowe oblicz gospodarza, gdy zacność domu, fortuny szczodrot objaśniają wrodzone
wdzięki i stoi wypisany każdy ksiądz toż samo gada na boku. Panny tuż na wieś i że polskie ubrani wysmukłą postać kształtną i gałęzie drzewa cały las i raptem boczne drzwi od <span><b> płaczącej matki pod Napoleonem, demokrata przyjechał z nieba dochodziło mniej zgorszenia. Ach, ja wam służyć, moje panny Róży a oni tak się i, czyje były, odgadywał. Przypadkiem oczy podniósł, i gestami ją nudzi rzecz długa, choć młodzież teraźniejsza, Że tym bielsze, że nam, kolego! lecz w ziemstwie, potem się czerwieni.</b></span> Twarzy wówczas nie korzystał dworze jak naoczne świadki. I Wojski z Warszaw mam list, to mówiąc, że.</div>
http://jsfiddle.net/3g9nvh2a/

Answer 2

I found this great article: http://krasimirtsonev.com/blog/article/CSS-The-background-color-and-overlapping-rows-inline-element
Add display: inline; to the div tag, and position: relative; to the span tag.
You will get this:
div {
font-family: Charis, serif;
font-size: 1.5em;
line-height: 0.8em;
text-align: justify;
display: inline;
}
span {
background-color: red;
position: relative;
}
See Fiddle http://jsfiddle.net/3uzbV/42/

Answer 3

It is fairly simple, just use:
display: inline-block;
In your css for span and it will be done

Answer 4

Add the following property to the span with a red background:
display: inline-block;
For example:
div {
font-family: Charis, serif;
font-size: 1.5em;
line-height: 0.8em;
text-align: justify;
}
span {
background-color: red;
display: inline-block;
}
<div>Litwo! Ojczyzno moja! Ty jesteś jak zdrowie. Ile cię stracił. Dziś człowieka nie biegł sług i dobył książeczkę z liczby kopic, co pod bramę. We dworze jak pieniądze Żydzi. To mówiąc spojrzał zyzem, gdzie mieszkał, dzieckiem będąc, przed laty, nad niego ze cztery. Tymczasem na swym dworze. Nikt go przez okienic szpar i kłopotach, i stanęli kołem. W biegu dotknęła blisko dwadzieści i bawi się strzelbami a Pan świata wie, jak zdrowe oblicz gospodarza, gdy zacność domu, fortuny szczodrot objaśniają wrodzone wdzięki i stoi wypisany każdy ksiądz toż samo gada na boku. Panny tuż na wieś i że polskie ubrani wysmukłą postać kształtną i gałęzie drzewa cały las i raptem boczne drzwi od <span> płaczącej matki pod Napoleonem, demokrata przyjechał z nieba dochodziło mniej zgorszenia. Ach, ja wam służyć, moje panny Róży a oni tak się i, czyje były, odgadywał. Przypadkiem oczy podniósł, i gestami ją nudzi rzecz długa, choć młodzież teraźniejsza, Że tym bielsze, że nam, kolego! lecz w ziemstwie, potem się czerwieni.</span> Twarzy wówczas nie korzystał dworze jak naoczne świadki. I Wojski z Warszaw mam list, to mówiąc, że.</div>