What the bug looks like

A long word, URL, email, button label, code snippet, or product title escapes outside a card and creates horizontal scrolling.

Why it happens

The browser needs permission to wrap long unbroken content. Without that permission, the text can become wider than its container.

What usually fixes it

Use overflow-wrap:anywhere, remove unwanted white-space:nowrap, and add min-width:0 inside flex or grid layouts.

Why text escapes outside a CSS box

Normal text usually wraps because it has spaces. The browser can break the line between words. But long unbroken content is different. A URL, a long username, a code token, a file path, or a very long product name may not have a comfortable break point.

When the browser cannot find a place to break the content, it may keep the text on one long line. That line can become wider than the card, button, column, or page. On mobile, this often becomes a horizontal scroll problem.

This issue often appears together with other FrontFixer problems like horizontal scroll on mobile, container width problems, and CSS Grid breaking on mobile.

Common signs this is a text overflow problem

Why this can break

The card has a width, but the text inside it does not have a rule that says, “You may break long content if needed.”

If the paragraph contains a long URL or unbroken word, the browser may keep that text on one line. The result is text sticking out of the card.

Simple rule: if user-generated content, URLs, code, or unpredictable text can appear inside a box, give that content a safe wrapping rule.

Before: the text escapes the box

The text has no safe place to break, so it keeps going in one long line and pushes outside the visible card.

After: the text wraps safely

With overflow-wrap:anywhere, the browser can break the long content and keep it inside the box.

When to use overflow-wrap:anywhere

Use overflow-wrap:anywhere when the content can be unpredictable. This includes user names, comments, URLs, slugs, file paths, product titles, API strings, hashes, email addresses, and dynamic text from a database.

It is especially useful in cards, comments, tables, buttons, sidebars, navigation labels, pricing boxes, dashboard widgets, and mobile layouts.

Use overflow-wrap:anywhere

This gives the browser permission to break long content almost anywhere when there is no better line break.

Remove accidental nowrap

If white-space:nowrap is applied, the browser is being told not to wrap the text.

Add min-width:0

Flex and grid children often need min-width:0 before text can shrink inside the available space.

Why this may still overflow in Flexbox

Even with overflow-wrap:anywhere, a flex child may still resist shrinking because flex items can have an automatic minimum size.

In practice, that means the text may still pressure the layout unless the flexible child gets min-width:0.

This is the same family of problems as a flex item shrinking even with fixed width. Flexbox sizing rules can surprise you if you only think in terms of width.

Why Grid can still overflow

CSS Grid can also be affected by minimum-size behavior. A plain 1fr track can still be influenced by content that refuses to shrink.

When the grid contains long text, URLs, buttons, code, or nested flex layouts, a safer pattern is to use minmax(0, 1fr) and add min-width:0 to grid children.

URL overflow is one of the biggest causes

URLs are dangerous for layouts because they can behave like one long unbroken word. A link inside a card, comment, table, or mobile column can easily become wider than the screen.

This is common in blogs, documentation pages, dashboards, admin panels, profile cards, and user-generated content.

Before and after URL behavior

A single wrapping rule can prevent the URL from destroying the container.

Why button labels escape

Many button systems use white-space:nowrap to keep short labels clean. That can be fine for simple labels like “Save” or “Buy now.”

But if the label is long, translated, dynamic, or user-generated, nowrap can force the button wider than its container.

.button {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

Should you use word-break:break-all?

Usually, no. word-break:break-all can be too aggressive because it may break normal words in ugly places even when better wrapping would be possible.

For most layouts, start with overflow-wrap:anywhere. It is usually a better first fix for long unbroken content because it focuses on preventing overflow without making every normal word look broken.