Uly.me

cloud engineer

  • Home
  • About
  • Archives
Home/CSS/CSS White-Space Property

September 20, 2016

CSS White-Space Property

Whitespace, line breaks, spaces and tabs are collapsed by default in HTML documents. To add space, we can add “&nbsp;” which translates to space, to add some separation between elements. In addition <br/> or line breaks can also be utilized to add space. There is a HTML property called white-space which can be used to configure how the whitespace inside the element is displayed. The following is a list of whitespace options.

Syntax

/* Keyword values */
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
 
/* Global values */
white-space: inherit;
white-space: initial;
white-space: unset;

/* Keyword values */ white-space: normal; white-space: nowrap; white-space: pre; white-space: pre-wrap; white-space: pre-line; /* Global values */ white-space: inherit; white-space: initial; white-space: unset;

Usage

p { white-space: normal }

p { white-space: normal }

white-space: normal

This is the default format. No breaks between paragraphs.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

white-space: nowrap

With nowrap, paragraph lines are extended out. No wrapping. No breaks between paragraphs.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

white-space: pre-line

With pre-line, breaks are inserted between paragraphs. Paragraphs are wrapped.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

The couple of examples above shows how elements can be styled using the white-space property.

Filed Under: CSS Tagged With: white-space

About Me

I'm Ulysses, a Cloud Engineer at Cardinal Health based in Columbus, Ohio. I’m a certified AWS Solutions Architect. This website is my way of documenting the things I have learned in the Cloud. When off the grid, I enjoy riding my electric skateboard. I have surfed, snowboarded and played the saxophone in the past. I hope you will find this site helpful. It's powered by WordPress and hosted in AWS LightSail.

  • Cloud
  • Linux
  • Git

Copyright © 2012–2021