Manage Spaces using white-space [10/16]

As you already know, the browser ignores multiple spaces and line breaks in the HTML code. You can change this behavior using the <pre> tag.

However, with CSS you can control spacing and hyphenation more flexibly. This is enabled by the white-space property having the following values:

  • nowrap shows all the text as a single line without hyphenation
  • pre preserves spaces and hyphens of the source code similarly to the <pre> tag
  • pre-wrap works the same as pre, but adds automatic hyphenation if the text overflows the container
  • normal is the default mode.

Do it
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Manage Spaces using white-space:</title> </head> <body> <h1>That&apos;s How Progressive Enhancement Has Emerged</h1> <p class="nowrap">Putting it short, all this bogus fail safety started to annoy the "righteous" developers, so something definitely had to be done.</p> <p class="like-pre"> Progressive Enhancement was born as a reaction to low-quality Graceful Degradation. Today, really professional developers and designers can do Progressive Enhancement while the amateurs can not, because it is more complex and requires more effort. At the same time, the new approach has absorbed all the best practices from Graceful Degradation. </p> </body> </html>
h1 { font-size: 24px; }
HTML Academy

Now, check how the white-space property affects the text appearance.

  1. For the header, set white-space: pre-wrap;.
  2. For the paragraph with the nowrap class, set white-space: nowrap;.
  3. For the paragraph with the like-pre class, set white-space: pre;.
Theory Check Next