Why is my heading text in Webflow not breaking into a new line and overflowing instead?
TL;DR
- Set White Space to “Normal” and Overflow to “Visible” to allow text wrapping.
- Ensure heading and container widths are flexible, avoid non-breaking characters, and check responsiveness on all screen sizes.
Your heading text in Webflow is not breaking into a new line because of layout or styling issues preventing natural text wrapping.
1. Check Overflow Settings
- Select the heading element, then check the Style panel.
- Ensure Overflow is set to Visible. If set to No Wrap or Overflow options like Hidden or Scroll, the text might be constrained.
- If the heading is inside a container or flexbox, ensure overflow settings on parent elements aren’t restricting line breaks.
2. Examine White Space and Flex Properties
- In the Style panel, check the White Space property.
- If it’s set to No Wrap, the heading will stay on one line. Change it to Normal or Pre-line to enable line breaks.
- If the heading is inside a Flex container, verify:
- Flex Direction is correct (usually Column allows natural vertical stacking).
- Wrap is set to Wrap if using Flex Row layout.
3. Inspect Width Constraints
- If the heading has a fixed width or is within a container that is too narrow or too wide, the text might overflow instead of wrapping.
- Set the heading’s Width to 100%, or allow it to auto-size with no fixed pixel value.
- Check the container's max-width and padding to ensure it provides enough space to wrap content.
4. Ensure No Manual or Non-breaking Characters
- In the heading text, ensure you’re not using non-breaking spaces (
). - These characters force text to stay on a single line and can cause overflow if there’s no breakpoint.
5. Responsive Size on Smaller Screens
- Switch to tablet and mobile breakpoints.
- Ensure the heading’s font size or word length doesn’t exceed the screen width.
- Use VW, EM, or % units for responsive font sizing, or apply line breaks (
<br>) strategically.
Summary
To avoid heading text overflow in Webflow, verify white space is set to “normal”, check overflow settings, and ensure the container and heading width are flexible. Also confirm the use of normal spacing characters and test responsiveness across breakpoints.