White spaces don't ignored in pre tag

html whitespace pre
hd. picture hd. · Aug 9, 2011 · Viewed 7k times · Source

I have read that the 'pre' tag will collapse all white spaces and tabs into one space ,but it doesn't do so in for me.

why is it so? is it depended on web browser or i should do something more?

Answer

ghayes picture ghayes · Aug 9, 2011

From HTML 4.01 Specification

The PRE element tells visual user agents that the enclosed text is "preformatted". When handling preformatted text, visual user agents:

  • May leave white space intact.
  • May render text with a fixed-pitch font.
  • May disable automatic word wrap.
  • Must not disable bidirectional processing

PRE tags will leave white space as you have typed it. The purpose is just that. If you don't use a pre tag, standard HTML will collapse white space as you have written. Use PRE if you are interested in preserving white space, not collapsing it.

Here is an example in JSFiddle.

This will preserve white space:

 <pre>
    Spaces
     and more
      galore
 </pre>

This will collapse white space:

 <div>
   All
    together
     now
 </div>

Related questions

Display element as preformatted text via CSS

Is there any way to emulate the display of a pre element via CSS? For example, can I keep the whitespace intact in this div by using a CSS rule? <div class="preformatted"> Please procure the following items: …

Read More
How to preserve whitespace indentation of text enclosed in HTML <pre> tags excluding the current indentation level of the <pre> tag in the document?

I'm trying to display my code on a website but I'm having problems preserving the whitespace indentation correctly. For instance given the following snippet: <html> <body> Here is my code: <pre> def some_funtion …

Read More
Avoid line break between html elements

I have this <td> element: <td><i class="flag-bfh-ES"></i>&nbsp;+34&nbsp;666&nbsp;66&nbsp;66&nbsp;66</td> I was hoping to keep this into a single …

Read More