20

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?

5
  • 2
    Not really, no (though maybe with JS). Is display: block a problem for some reason? Jan 6, 2010 at 19:42
  • Your question is a bit unclear. Which part of the example text should have the background image? Jan 6, 2010 at 19:43
  • This doesn't seem to be programing related. I'd ask this on doctype.com instead. Jan 6, 2010 at 19:46
  • The reason display: block; is a problem, is that there can be text and a span-start at the same line. The div would introduce a linebreak that is not supposed to be there. Jan 6, 2010 at 19:57
  • Hi @MichaelAndersen... i see you're still a S.O. user while at the UofC ;-)--~~ . . . . could you please accept an answer on this question, so a good one is prioritized to the top? (It's silly that S.O. sorts this incomplete/inaccurate answer to the top since the question doesn't have an Accepted Answer. At first glance, one might be prone to heed the advice on the first response, instead scrolling to find the more accurate ones below.)
    – ashleedawg
    Jan 8, 2019 at 8:06

4 Answers 4

14

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>
1
  • Not in safari or firefox. I am sorry if i was not clear enough. The background-color have to continue to the end of the containing box. In this case the right side of the pre-element. Jan 6, 2010 at 20:00
4

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>
1
  • The reason it cannot be a block element is, that it would introduce linebreaks then a span starts and ends at the same line as other elements or other text. Sorry for the misunderstanding. I corrected the example for clarification. Jan 6, 2010 at 20:05
2

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>
2
  • Nice. But it introduces a problem the gray text in the first line is longer than the white text in the second line. Then the second line will be gray after the text ends. But for a static markup, this would work. Jan 7, 2010 at 10:51
  • div is not allowed within pre May 6, 2020 at 15:43
0

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

1
  • This is not true. You don't have to color the whole line's background. See other answers.
    – ashleedawg
    Jan 8, 2019 at 8:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.