CSS overflow-wrap: Keep Long Strings from Breaking Layouts

A layout looks fine with sample data but gains a horizontal scrollbar when someone enters a long reference identifier. The string may simply lack convenient wrapping opportunities. Before shrinking text or hiding overflow, inspect wrapping in the affected component.

1. Reproduce the problem with mock data

Place a long fake identifier in a width-constrained card on a test page. Never use a real token to reproduce an issue, even for a screenshot intended only for colleagues.

<div class="reference-card">
  <p>Reference identifier:</p>
  <p class="reference-value">DEMO20260926ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p>
</div>

.reference-card {
  box-sizing: border-box;
  width: 100%;
  max-width: 20rem;
  padding: 1rem;
  border: 1px solid #777;
}
.reference-value {
  white-space: normal;
  overflow-wrap: anywhere;
}

The MDN overflow-wrap reference explains that anywhere allows otherwise unbreakable strings to wrap when necessary to prevent overflow. This changes presentation rather than inserting newline characters into the underlying data.

2. Do not replace everything with word-break: break-all

word-break: break-all allows breaks between non-CJK text characters. It can split ordinary words even when moving a whole word to the next line would be easier to read. Consult the word-break reference for the distinction.

For identifiers, email addresses or user-supplied content, start with a narrowly scoped rule. One overflowing component is not a reason to change word breaking across the entire website.

3. Inspect the parent if overflow remains

Use developer tools to inspect actual widths and effective styles. Another white-space: nowrap rule, an oversized fixed width or a parent that refuses to shrink may require a separate correction.

Inside Flexbox, examine the flex item's minimum size. The shrinking item may need min-width: 0, but identify the overflowing element before applying it broadly. In Grid, inspect column definitions as well as content.

4. Wrapping is not hiding

overflow: hidden can conceal part of an identifier that users need. Ellipsis can suit some lists, but provide access to the complete value when the task requires reading or copying it. A missing horizontal scrollbar alone does not prove the problem is fixed.

Code blocks or structured tables may benefit more from a dedicated horizontal scrolling area than forced wrapping. Choose based on whether readers need to read prose, compare columns or copy commands.

5. Release checklist

• Test strings without spaces, ordinary sentences and accented Vietnamese text.
• Check narrow screens and enlarged text.
• Ensure the entire value remains readable.
• Copy identifiers into an editor and compare with the source.
• Test both standalone cards and the real Flexbox or Grid layout.
• Keep private information out of issue screenshots.

These examples and checks guide your testing; they are not measurements from a specific product. Fixing the affected area keeps the layout usable without sacrificing access to the data.