CSS: Display Spaces and Paragraphs as in the HTML Code

Normally, paragraphs, that are written in the HTML code, are totally ignored and spaces are only displayed in the browser, if they are meaningful, for example, if they separate elements, such as words or images.

In this context, the CSS property "white-space" is of interest, because this property can override this state. Whenever you want to display a text like it is displayed in your HTML editor, you can use "white-space".

<p style="white-space:normal">This line behaves as usual in HTML.</p>
<p style="white-space:nowrap">This line is not wrapped.</p>
<p style="white-space:pre">This line will be displayed with all line
  breaks and spaces exactly like in the source code.</p>

The property "normal" leads to a normal text behavior like it is usual in HTML. Line breaks in the source code, which are visible in the HTML editor, will not be displayed and multiple spaces will be summarized into one.

The property "nowrap" leads to the behavior that the entire text is displayed in one line (unless there are line breaks determined with <br> or other HTML tags). In other words: If the browser window should be too small to display a text, normalley the text would be wrapped. With "nowrap", the text will be still kept in a single row, so that you have to scroll vertically to see the text.

Finally, with the property "pre", you achieve that the text is displayed exactly as it is written in the source code. So, if you are using multiple spaces to position the text or you have written line breaks between words, these things will also be displayed in the browser, even if these thinks would not appear under normal circumstances. This is useful, for example, if you want to insert an entire file of source code, and the code to be displayed should appear exactly like in the file.

Other properties of white-space

Other properties of white-space are "pre-wrap" and "pre-line". With "pre-wrap" the text behavior is the same as with "pre", but the text will be wrapped whenever the width is not sufficient to display everything. The line break behavior with "pre-line" is like the line break behavior in "pre-wrap", but multiple spaces behind each other will be displayed as one space, like it is otherwise.