Which CSS white-space Property Values Don't Preserve Space?

This following CSS white-space property values do not preserve spaces:

  • normal (default)
  • nowrap
  • pre-line

This means that when the CSS white-space property is set to any of these values, sequences of spaces will be collapsed into a single character, unless the collapsible spaces are at the beginning or end of a line (in which case they are removed). You can prevent this from happening if you use CSS white-space property values that preserve spaces.

Consider for example the following, where spaces are collapsed:

<span>foo</span> bar
span { border: 1px solid orange; }
span::after { content: ' '; }

This would result in only one space after "foo", instead of two.

This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.