Text Wrapping, Overflow, and Ellipsis

Long titles, product identifiers and links may exceed a narrow card. CSS offers distinct tools for wrapping versus truncating text.

overflow-wrap: anywhere allows an otherwise unbreakable string to wrap before it causes overflow. white-space: nowrap prevents normal wrapping, while overflow: hidden clips extra content. Together with text-overflow: ellipsis, a one-line label can show an ellipsis when space runs out.

Truncation hides information, so it is most appropriate for nonessential previews. Do not truncate critical warnings, error messages or labels that users must read in full.

Wrapping introduces line breaks and expands the box vertically; ellipsis instead conceals overflow inside a constrained line.

Permit an unusually long value to break across lines.

HTML

<div class="reference"><strong>Reference:</strong><p>paymentconfirmationidentifier2026octoberexample2026</p></div>

CSS

.reference { max-width: 250px; padding: 12px; border: 1px solid #cbd5e1; border-radius: 8px; }
.reference p { overflow-wrap: anywhere; margin: 6px 0 0; color: #475569; }

Rendered output

Observe: The identifier wraps inside the card rather than forcing horizontal overflow.

Reserve a single line for a secondary title.

HTML

<div class="compact-row"><span class="compact-name">A very long location description that does not fit</span><span class="compact-state">Active</span></div>

CSS

.compact-row { display: flex; gap: 12px; max-width: 320px; padding: 12px; border-radius: 8px; background: #f1f5f9; align-items: center; }
.compact-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.compact-state { flex: none; color: #047857; font-size: 12px; font-weight: 700; }

Rendered output

Observe: The label shortens with an ellipsis, leaving room for the nonshrinking status label.

Wrapping introduces line breaks and expands the box vertically; ellipsis instead conceals overflow inside a constrained line.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• text-overflow:ellipsis normally requires overflow clipping, a width constraint and a non-wrapping line.
• Hiding vital information without a way to inspect it hurts usability.

Remove white-space:nowrap from the second example and explain whether the label now wraps or clips.

Before changing the code, predict what will change. Then verify by checking the rendered result.

Choose wrapping for complete information and ellipsis only when abbreviated text is acceptable.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.