How do I set span background-color so it colors the background throughout the line like in div (display: block; not an option)

user_172841 0
Viewed 113189

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?

css html javascript
4 Answers

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>
user_1324240

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>
scaryjeff_100180

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>
user_1664910

span is an inline element. You will need a block level element in order to fill the entire width. Inline versus block

user_1445290
Related