Why is my heading text in Webflow not breaking into a new line and overflowing instead?
TL;DR
- Set white space to “Normal” in the Typography section to enable line breaks.
- Check and adjust heading or container width settings to use responsive units.
- Replace fixed widths and ensure overflow is not hidden to spot layout issues.
- Inspect inline elements preventing wrapping and adjust their display or whitespace.
- For unbreakable text (e.g. long URLs), use word-break or overflow-wrap CSS properties.
If your heading text is overflowing and not breaking into a new line in Webflow, it's usually due to a combination of CSS styling settings that prevent wrapping. Here's how to identify and fix it.
1. Check the "White Space" Style
- Select the heading element in the Designer.
- In the Style panel, go to the Typography section.
- Look for the White Space setting. If it’s set to “No Wrap”, it will prevent the text from breaking into a new line.
- Change it to “Normal” to allow line breaks.
2. Inspect Width Constraints
- Ensure the heading’s parent container or the heading itself isn’t set to a very large width that forces all text onto a single line.
- If the parent has flex or grid settings, check for any min-width: 100% or nowrap behavior.
- Set the heading or its container to a reasonable max-width, like 100%, or use responsive units (e.g., VW, %).
3. Remove Fixed Widths or Overflow Settings
- If the heading or its parent is using fixed pixel widths, the text may overflow depending on content length.
- Also ensure Overflow under Layout is not set to Hidden if you want to detect actual overflow.
- Change fixed widths to Auto or % to allow flexibility on smaller screens.
4. Check for Inline Elements
- If your heading contains nested inline elements (like spans or inline-blocks), they may prevent breaking.
- Select those elements and ensure they aren’t styled as inline or inline-block with white-space: nowrap.
- Modify their display to inline-flex or block, or adjust their whitespace settings.
5. Review Text Content
- Long, unbreakable strings like emails, URLs, or very long words will not wrap naturally.
- Use soft hyphens (­), zero-width spaces, or word-break settings for better behavior:
- Set word-break: break-word or overflow-wrap: break-word in the Style panel or a custom class.
Summary
Your heading is overflowing likely due to white-space: nowrap, fixed widths, or unbreakable content. Change white space to “Normal”, check container widths, and ensure content can naturally break into lines for responsive behavior.