The tutor shares how to preserve white space on a web page.

Html doesn’t always take white space literally: when you type five spaces, the browser might show only one.

What if you want the browser to render all the white space just as you’ve typed it? Perhaps you can use the css white-space property.

Both paragraphs, below, are typed with five spaces, then Hello, then five more spaces, then Hello. Its literal html follows each:

Hello Hello

<p> Hello Hello</p>

Hello Hello

<p style=”white-space:pre-wrap”> Hello Hello</p>

Apparently, with the css white-space property, “pre” means “preserve”. “pre-wrap” means that the text will wrap like normal; with just “pre”, it won’t wrap until a line break:

This paragraph is styled with “white-space:pre-wrap”. Hence, extra spaces are preserved like these five , yet the line automatically wraps. If it were styled with just “white-space:pre”, it would continue on the same line until encountering a line break.

Neat, eh?

Source:

w3schools.com

Jack of Oracle Tutoring by Jack and Diane, Campbell River, BC.