javascript – How do I set span background-color so it colors the background throughout the line like in div (display: block; not an option)
javascript – How do I set span background-color so it colors the background throughout the line like in div (display: block; not an option)
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 youve placed it. Since its 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 its 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>
javascript – How do I set span background-color so it colors the background throughout the line like in div (display: block; not an option)
You can try to work in reverse mode, it has more markups but it does what you want.
<pre>
<div style=background-color:#ddd;float:left><span style=background-color:#fff>some text</span>and some text
with a different background <span style=background-color:#fff>and some more text</span>
</div>
</pre>