CSS-White Space Property

Have you ever wanted to write text which you could just write in one single line and the cursor never moves onto the next line? Then the CSS-White-Space property is for you! It works exactly the way like I described. You could go on writing  in the same line without moving on to the next line. There are a lot of practical cases which would show you why we would need such a property.

Let me Illustrate with an example. Below, you will find a small paragraph which talks about “articles”.

Capture

We can manipulate the paragraph above by changing the font size, the type of font and the spacing between letters. Let me tell you, that these topics are going to be really interesting. This is where you would have a complete control on how you would like to define the paragraph. I would be explaining them in my forthcoming blogs.

Now let’s go back to the paragraph which I was talking about a little while earlier. As I was saying we can manipulate  the white spaces in the paragraph so that we can have more words on the same line.

Let’s apply the white-space property to the paragraph now. And see how it looks??

Capture

I have just shrunk the image a bit. That’s why it appears to be a little smaller. So, now that  I have applied the white-space property.What you might now be wondering is, where is the rest of the paragraph gone?? Well, it ‘s all there but it is hidden. If you carefully observe the image above, you would notice that in the bottom of the image lies a horizontal scroll bar.  So in order to see the whole paragraph one would have to actually use the horizontal scroll bar and navigate horizontally. This is because all the text has been “wrapped” into a single line.

Let me show you what I wrote-

p{
white-space:nowrap;
}

And let’s start from the first letter! You would observe a letter “p” with a pair of curly braces. The letter “p” denotes a paragraph and it indicates that we are manipulating a paragraph. The actions for manipulation come within the curly braces. And the action is “white-space:nowrap”. This essentially means that we are instructing CSS not to wrap the text to the next line. In other words, the words should not collapse to the next line after reaching a certain limit. Normally, the limit which is given is the width of the screen. So, once it reaches that limit, in normal circumstances the next word would collapse to the next line.

The formal definition for white-space would be as follows

white-space:value;

where the value could be-normal, nowrap,pre, pre-line and pre-wrap.

The normal value is the default value and it need not be explicitly specified. The values after nowrap are used rarely and not of real significance.

And that’s it for today.Hope you had a pleasant reading experience!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s