CSS tips: modify the display of the text with the white-space property

One of the least known aspects of CSS is that relative to the management of white spaces inside a text. Often there is the necessity for having a greater control over text formatting compared to that predefined by the browser: an example could be that of having to display a poem, respecting the eventual spaces and line interruptions foreseen by the author of the latter.

In this pill you will learn about how to use the interesting white-space property, in order to give a touch of originality to your works.

The reason behind the scarce use of this property is mainly practical: the implementation in browsers, until recently, has been defective or characterized by various bugs. For example Internet Explorer has offered complete support starting from version 8, while Firefox from version 3.1.

But what is the effect of this property on our text?

Default conduct: the ‘normal’ value

Translating from the specifications of W3C you read:

“This property declares how the white space inside an element is managed.”

When we write the markup of our webpages , the white spaces and the text lines (the “new paragraphs”) are ignored. Thus the three following paragraphs:

<p>This is a test paragraph.</p>

<p>This is a
test
paragraph.</p>

<p>This       is      a    test     paragraph.</p>

are displayed in the same way by the browser, that is on a single line, without internal spaces. This because the default conduct does not show the text lines present in the HTML source code and cancels all the spaces present (except one): in this way by inserting five or a hundred spaces after a word, in the source code we will always have a single space displayed on the browser. Such default conduct corresponds to the use (not necessary) in the style sheet of the ‘normal’ value for the property white-space:

p {
    white-space:normal;
}

Taking spaces into account: the ‘pre’ value

The opposite conduct to the predefined one can be obtained setting the white-space property on the ‘pre’ value: all the white spaces and the ‘new paragraphs’ present in the source code are loyally displayed in the browser. The following paragraph, for example:

<p style="white-space:pre">This word is  v   e   r   y   s   l   o    w.
I put
a lot of
break,
without &lt;br&gt; elements
Nam posuere sem ligula. Sed et quam odio. Aenean imperdiet nibh id dolor dignissim ultrices. In hac habitasse platea dictumst. Morbi semper neque nec leo lacinia ac fringilla ipsum posuere. Pellentesque porta aliquet orci, quis adipiscing mauris mollis in. Aenean a turpis lacus. Maecenas adipiscing fermentum enim eget tristique
</p>

is displayed as it has been written in the HTML code. It is interesting to observe that, unless explicitly inserting a line interruption in the HTML, the browser will display everything on a single line.

In order to obtain the same result, the <pre> tag could have been used, but not always that’s the right choice, from a decidedly semantic point of view, since such an element represents an unformatted generic block, while our intention might be that of representing a formatted title in an unusual way.

Eliminating all spaces: the ‘nowrap’ value

Normally when a text block reaches the limit of the page (or the block that contains it), the browser inserts a line interruption, so that the text continues with a new paragraph, thus avoiding the appearance of the horizontal scroll bar.

In order to have the opposite conduct and completely remove all spaces inside the text, thus impeding that the text goes in new paragraph even after having reached the limit of its container, enough specifying the ‘nowrap’ value for the white-space property, like in this example.

p {
    white-space:nowrap;
}

Using this value the only way to insert a line interruption inside the paragraph is that of making use of the <br> tag, while it is not possible to insert additional spaces, as these are going to be eliminated at the act of browser rendering.

Combining the effects: ‘pre-wrap’ and ‘pre-line’ values

The ‘pre-wrap’ element is one of the values which has been adopted by browsers in more recent times: as the name suggests, this value combines the effects of the ‘pre’ value, thus keeping the spaces and lines present in the source code, with the only difference of adding an automatic ‘new paragraph’ once reached the limit of the container block.
Considering this markup, all the spaces are going to be displayed even in the browser, as well as the line interruptions.

Using the pre-line value instead, we ask the browser to ignore the eventual additional spaces present in the source code maintaining, instead, all line interruptions. Using the same markup of the previous example, we obtain this different result.

Conclusions

When does the use of the white-space property become necessary? Whenever text formatting is essential for the project you are working on, the various modalities of this property might be useful. For example, in order to create the example page of this article, I have set the ‘pre-wrap’ value for white-space to the <pre> tag: in this way I have obtained a loyal rendering of the example code, without allowing the spill outside the edge of the block.

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
[pdf]Scarica articolo in PDF[/pdf]
Tags: ,

The Author

Fond of web design, takes delight in creating (X)HTML+CSS layouts. A maniac of polished and tidy codes, the type of person you find in your house straightening the paintings hanging on the wall. He has made his mind of becoming a web designer with a capital “w”, and spends entire nights awake in order to make his dream come true.

Author's web site | Other articles written by

Related Posts

You may be interested in the following articles:

8 comments

Trackback e pingback

  1. Tweets that mention CSS tips: modify the display of the text with the white-space property | Your Inspiration Web -- Topsy.com
    [...] This post was mentioned on Twitter by soshableweb and Tom Bangham, V. Tavares (E-Goi). V. Tavares (E-Goi) said: CSS …
  2. Tweets that mention CSS tips: modify the display of the text with the white-space property | Your Inspiration Web -- Topsy.com
    [...] This post was mentioned on Twitter by Stewart Griffiths, Web Design Filter. Web Design Filter said: RT @welshstew #CSS …
  3. CSS tips: modify the display of the text with the white-space … | My Blog
    [...] reading here: CSS tips: modify the display of the text with the white-space … This entry …

Leave a Reply

Current month ye@r day *