CSS: inline a <pre> tag

Question

Here is my HTML:

<p>The following text <pre>is an inline preformat block</pre> and will not be parsed.</p>

I want it rendered as a single line, with a preformat block in the middle of the sentence. However, it is rendering as three separate lines:

---

The following text

is an inline preformat block

and will not be parsed.

---

And what I want is for it all to be on one single line. I have tried setting the style to use display:inline, but that only solves my problem halfway: no newline is introduced at the end of the pre block, but there is still one at the start.

As has been suggested elsewhere, I tried using white-space:nowrap, but it accomplishes absolutely nothing at all.

No solutions based on javascript or jquery, please. I want to make sure the solution works on browsers which have scripting disabled.

Answer 1

Solution #1 using <pre> (not recommended):
You can use the following code, but the <p> element is a little bit broken. If you want to avoid to affect all <p> elements, add class or id attribute to the <p> element.

pre, p {
  display:inline;
}

<p>The following text <pre>is an inline preformat block</pre> and will not be parsed.</p>

Solution #2 using <code>:
A better solution would be to replace the <pre> with <code>. The output looks the same like the solution using the <pre> element.

<p>The following text <code>is an inline preformat block</code> and will not be parsed.</p>

Solution #3 using <span>:
If you want to define the element yourself you can use the following:

p span {
  font-family:monospace;
}

<p>The following text <span>is an inline preformat block</span> and will not be parsed.</p>

Answer 2

Can't you just use a span tag, and design that with css?

<p>The following text <span>is an inline preformat block</span> and will not be parsed.</p>