00 Votes

CSS: Display Spaces and Paragraphs as in the HTML Code

Tip by Stefan Trost | 2012-03-21 at 23:52

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.


About the Author

AvatarYou can find Software by Stefan Trost on sttmedia.com. Do you need an individual software solution according to your needs? - sttmedia.com/contact
Show Profile


Related Topics

HTML: Invisible Delimiter

Question | 1 Answer

Important Note

Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.


Ask your own question or write your own article on askingbox.com. That’s how it’s done.