Zauber Paracelsus Zauber Paracelsus - 7 months ago 11
HTML Question

CSS: inline a <pre> tag

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

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>