JSFiddle - React, Tailwind, and code Playground

and … yet another try at the inline-padding thing

by CBroe

HTML

<div class="Xnobr">

    <p><span>Lorem ipsum dolor sit amet,<span class="b1">&thinsp;&#10;&thinsp;</span>Lorem ipsum dolor sit amet,<span class="b1">&thinsp;&#10;&thinsp;</span>consetetur sadip<span class="b2 s">&thinsp;&#10;&thinsp;</span>scing elitr, sed diam<span class="b3">&thinsp;&#10;&thinsp;</span>nonumy eirmod tempor invidunt ut labore<span class="b1">&thinsp;&#10;&thinsp;</span>et dolore magna ali<span class="b2 s">&thinsp;&#10;&thinsp;</span>quyam erat, sed diam<span class="b3">&thinsp;&#10;&thinsp;</span>voluptua. At vero eos et accusam<span class="b1">&thinsp;&#10;&thinsp;</span>et justo duo dolores<span class="b2">&thinsp;&#10;&thinsp;</span>et ea rebum.<span class="b3">&thinsp;&#10;&thinsp;</span>Stet clita kasd gubergren.<span class="b3">&thinsp;&#10;&thinsp;</span>Stet clita kasd gubergren.</span></p>


<p><span>Lorem ipsum dolor sit amet,<span class="b1">&thinsp;&#10; </span>Lorem ipsum dolor sit amet,<span class="b1">&thinsp;&#10; </span>consetetur sadip<span class="b2 s">&thinsp;&#10; </span>scing elitr, sed diam<span class="b3">&thinsp;&#10; </span>nonumy eirmod tempor invidunt ut labore<span class="b1">&thinsp;&#10; </span>et dolore magna ali<span class="b2 s">&thinsp;&#10; </span>quyam erat, sed diam<span class="b3">&thinsp;&#10; </span>voluptua. At vero eos et accusam<span class="b1">&thinsp;&#10; </span>et justo duo dolores<span class="b2">&thinsp;&#10; </span>et ea rebum.<span class="b3">&thinsp;&#10; </span>Stet clita kasd gubergren.<span class="b3">&thinsp;&#10; </span>Stet clita kasd gubergren.</span></p>

<p><span>Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diamnonumy eirmod tempor invidunt ut laboreet dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusamet justo duo doloreset ea rebum. Stet clita kasd gubergren. Stet clita kasd gubergren.</span></p>

</div>

CSS

p { position:relative; margin:1em; }
p > span { color:#fff; background:#000; line-height:1.5; }
p > span:before, p > span:after { xbackground:blue; content:"\202f"; } 
.b1, .b2, .b3 { xbackground:red; white-space:pre; }
.s:before { content:"-"; }

.nobr p > span:before, .nobr p > span:after { display:none; }
.nobr .b1, .nobr .b2, .nobr .b3 { display:inline-block; white-space:normal; }
.nobr .s { display:none; }