white-space

style.css

/* normal: collapse whitespace, wrap as needed (initial value) */
p.test { white-space: normal;}

/* pre: preserve spaces, tabs, and line breaks as-is (good for code display) */
p.test2 { white-space: pre;}

/* nowrap: prevent line breaks (text extends on a single line) */
p.test3 { white-space: nowrap;}

/* pre-wrap: preserve whitespace and line breaks, but wrap at box edge */
p.test4 { white-space: pre-wrap;}

/* pre-line: collapse spaces, preserve explicit line breaks */
p.test5 { white-space: pre-line;}

/* Classic pattern: single-line text with ellipsis overflow */
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

/* Preserve line breaks in chat / comment areas */
.comment { white-space: pre-wrap; word-break: break-word;}

These samples use the following string:

This is a p element.     Text. Text.
		Text. Text. Text.

<p style="border: solid 1px; white-space: normal; width: 200px;">This is a p element.     Text. Text.
Text. Text. Text.</p>

<p style="border: solid 1px; white-space: pre; width: 200px;">This is a p element.     Text. Text.
Text. Text. Text.</p>

<p style="border: solid 1px; white-space: nowrap; width: 200px;">This is a p element.     Text. Text.
Text. Text. Text.</p>

/* Text overflows without overflow handling */
.title { white-space: nowrap; }

/* Combine with overflow and text-overflow for ellipsis */
.title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* With pre, the line breaks and spaces in HTML are displayed as-is */
.code-block { white-space: pre; }

※ Version data is based on MDN.