How to stop multiple spaces in HTML from collapsing to a single space with CSS

2020-03-25

Usually, multiple consecutive spaces in HTML collapse to a single space. To prevent this collpasing for spaces (and other whitespace characters), the white-space CSS property can be used. When set to pre-wrap, this property will cause sequences of space characters to be retained while new lines will continue to collapse as normal.

Example:

CSS:

#white-space-example-pre-wrap p {
	white-space: pre-wrap;
}

HTML:

<div id="white-space-example-pre-wrap" class="example-block">
	<p>Please, I need some space...           ok, you got it.</p>
</div>