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
You 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
CSS: Include CSS Stylesheets in HTML
Tutorial | 0 Comments
Website Performance: Deliver JavaScript and CSS files compressed to reduce loading times
Tutorial | 0 Comments
HTML: No line break between particular words
Tip | 0 Comments
Reload Images, CSS, JS and Web Pages despite Browser Cache
Tip | 2 Comments
HTML: Difference between ID and CLASS
Info | 0 Comments
Darken Background of a Website (Gray Out Effect)
Tutorial | 0 Comments
jQuery: CSS Stylesheet Switcher
Tutorial | 1 Comment
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.
Participate
Ask your own question or write your own article on askingbox.com. That’s how it’s done.