Text Wrapping and Truncation Summary

For demonstration purposes, we will use the following element:

<p class="element">
  The report on the role of science in society mentioned research on polytetrafluoroethylene and tetraethylorthosilicate
</p>

overflow-wrap

Allows the browser to break long, unbroken tokens to prevent container overflow.

⚠️ Old guides may reference the deprecated property word-wrap: break-word. If you encounter it in code, replacing it with overflow-wrap: break-word preserves the same behavior.

anywhere and break-word

.element { overflow-wrap: anywhere; }

.element { overflow-wrap: break-word; }

Permits breaking a word at any point to avoid overflow. When used with width: min-content, anywhere will not expand the block beyond its minimum content width.

anywhere

polytetrafluoroethylene

break-word

polytetrafluoroethylene

text-wrap

nowrap

Disables automatic line breaks but respects explicit \n line breaks.

.element { text-wrap: nowrap; }

The report on the role of science in society mentioned research on polytetrafluoroethylene and tetraethylorthosilicate

balance

Automatically adjusts line breaks to better balance text across lines.

.element { text-wrap: balance; }

⚠️ Character counting and line balancing is resource-intensive and works only for texts shorter than 6 lines. The example text has been shortened.

Before

The report on the role of science in society

After

The report on the role of science in society

word-break

Breaks text between any characters.

⚠️ In most cases, this makes reading harder and it is better to use overflow-wrap: anywhere.

.element { word-break: break-all; }

The report on the role of science in society mentioned research on polytetrafluoroethylene and tetraethylorthosilicate

white-space and text-overflow

Single-line truncation with ellipsis

Used in combination with overflow: hidden + text-overflow: ellipsis. In other scenarios, white-space is rarely applied.

.element {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

The report on the role of science in society mentioned research on polytetrafluoroethylene and tetraethylorthosilicate

Multi-line truncation with ellipsis

A similar approach for multi-line text.

.element {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

The report on the role of science in society mentioned research on polytetrafluoroethylene and tetraethylorthosilicate

Whitespace formatting with white-space

Not related to word wrapping but useful for controlling spaces and line breaks in the original text.

pre

Preserves all spaces and line breaks as in the source. Lines will not wrap automatically — text may overflow the container.

.element { white-space: pre; }

The report on the role of science in society mentioned research on polytetrafluoroethylene and tetraethylorthosilicate

pre-wrap

Preserves all spaces and line breaks as in the source. Lines will wrap automatically if they don't fit the container.

.element { white-space: pre-wrap; }

{ "id": 123, "name": "Bob", "roles": [ "user" ], "settings": { "theme": "dark" } }

pre-line

Collapses multiple spaces into one. Lines will wrap automatically if they don't fit the container.

.element { white-space: pre-line; }

{ "id": 123, "name": "Bob", "roles": [ "user" ], "settings": { "theme": "dark" } }

Summary

• Long words, URLs, and unbroken tokens — use overflow-wrap: anywhere.
• Replace legacy word-wrap: break-word with overflow-wrap: break-word.
• For strict preservation of spaces and line breaks, e.g., in code blocks, use white-space: pre-wrap.
• If line breaks are manual but repeated spaces should be collapsed, use white-space: pre-line.
• For truncating text with ellipsis — use white-space: nowrap + overflow: hidden + text-overflow: ellipsis.
• Text line balancing — use text-wrap: balance, but only for short texts.