Which CSS white-space Property Values Preserve Space?

This following CSS white-space property values preserve spaces:

  • pre
  • pre-wrap
  • break-spaces

This means that when the CSS white-space property is set to any of these values, spaces won't be collapsed or removed (which might be the case when the property is set to a collapsible white-space value).

Consider for example the following, where spaces are preserved:

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

This would result in two spaces after "foo" (as opposed to one, which would be the case if the white-space property was set to a collapsible value).

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.