Menu
I need to style some text within a pre-element. For that, I use an inline span-element like this:
<pre>
some text <span style="background-color:#ddd;">and some text
with a different background</span> and some more text
</pre>
Then the html is rendered, the span-elements background is only changed underneath the text.
Is it somehow possible to make the background-color extend throughout the line without changing display to block or inline-block.
Or is there a way to achieve this with javascript?
769
you can achieve this by formatting your text in a different way. I have achieved what I believe you are looking for with the following:
<pre>
some text<span style="background-color:#ddd;">
and some text
with a different background</span>
and some more text
</pre>
The span element is inline, so it just changes the background for where you've placed it. Since it's also within a <pre> tag, if you want it to change the background for whitespace around the text too, then you can include that whitespace within the span.
For example, this would make the background change for some whitespace at the end of each line as well as behind the text (but only because of the pre is the whitespace is taken into account, without the pre the whitespace would be ignored as normal.)
<pre>
some text
<span style="background-color:#ddd;">and some text <br/>
with a different background </span>
and some more text
</pre>
What is preventing you from using a block element? It would be much better to either make the span display as a block element rather than inline when it's in this specific part or just use a block element to begin with, rather than a span. For example,
<html>
<head>
<style>
pre span { display: block; }
</style>
</head>
<body>
<pre>
some text
<span style="background-color:#ddd;">and some text<br/>
with a different background</span>
and some more text
</pre>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
