HTML pre no line wrap border

Question

I have a pre tag with some code in it that doesn't line wrap. I want to put a border around it (border:1px solid Black;), but the border is limited to the width of the browser, regardless of the length of the text. How can I force the border to always extend to contain all the text in the pre tag?

Here's the code I'm using:

<pre style="border:2px solid Black;">@Model.Code()</pre>

Solution 1

Try adding display: inline to your pre tag CSS.

Solution 2

Use:

<pre style="display: inline-block; border:2px solid Black;">

Solution 3

For displaying code you want to use

pre { white-space:pre-wrap }

And for normal text you may want to use

pre { white-space:pre-line }

pre-line makes from multiple white space characters one space character, pre-wrap doesn't.

Now if you add a border it will be around the entire text, and the text will be wrapped.

pre {
    white-space:pre-line;
    border:2px solid black
}

Or didn't you ask for this?

Comments

[Entity]

That puts a border around every line of text

[Entity]

I'll go ahead and mark this as answer; I just needed to use display: inline-block;

[Entity]

Ah. I forgot to mention there were multiple lines in the pre.