How to stop text from overflowing in Webflow?

Text overflowing its container shows up as content bleeding past boundaries, creating horizontal scrollbars, or getting cut off at awkward points. It's one of the most visible layout issues and tends to appear when long words, URLs, or unbroken strings of text are wider than their parent element.

The direct fix: overflow-wrap

The most reliable solution is to set Overflow Wrap to Break Word on the text element or its parent container. In the Style panel, navigate to the Typography section and find Overflow Wrap. Change it from the default (Normal) to Break Word. This forces the browser to break long words at the container edge instead of letting them overflow.

This single property handles the majority of text overflow cases — long URLs, continuous character strings, and unusually long compound words will all wrap correctly.

Additional controls

Word Break — In the same Typography section, you can set Word Break to Break All. This is more aggressive than overflow-wrap: it breaks words at any character, including mid-word in regular text. Use this sparingly, as it can make short words look unnatural. Overflow-wrap with break-word is almost always the better choice.

White Space — Make sure White Space is not set to No Wrap. When white-space is set to nowrap, the browser is explicitly told never to wrap text, which causes overflow. Set it to Normal or Pre Wrap depending on your needs.

Truncation with ellipsis

If you want text to truncate instead of wrap — showing an ellipsis (...) at the end — apply these three properties together on the element:

1. White Space: No Wrap
2. Overflow: Hidden (in the Size section)
3. Text Overflow: Ellipsis (in the Typography section)

This is useful for single-line titles, card headings, or anywhere you need to enforce a strict one-line limit.

Container width matters

Text overflow is often a symptom of the container itself. If the parent element has no width constraint — or a width that's too narrow — text will try to fill whatever space is available. Make sure parent containers have appropriate max-widths and padding so text has a reasonable area to fill.

Quick steps

1. Set Overflow Wrap to Break Word on the text element
2. Ensure White Space is set to Normal (not No Wrap)
3. If truncation is preferred, combine No Wrap + Overflow Hidden + Text Overflow Ellipsis
4. Verify parent containers have proper width constraints

Overflow-wrap: break-word solves most text overflow issues in Webflow without side effects.