Why is my heading text in Webflow not breaking into a new line and overflowing instead?

Your heading text in Webflow may not be breaking into a new line due to styling issues such as white-space settings, fixed widths, or non-breaking characters.

1. Check the White-Space Property

• Select your heading element in the Designer.
• In the Style panel, scroll to the Typography section.
• Ensure that the White-space property is set to normal.
• If it's set to nowrap, the text will be forced to stay on a single line and may overflow.

2. Review the Width and Overflow Settings

• Make sure the heading’s parent container has enough width or is set to auto or 100%.
• Check if any fixed width is applied to the heading or its parent that restricts wrapping.
• Inspect the Overflow setting under the Layout section. If it’s set to visible, long text can overflow out of its container.

3. Inspect Padding and Margins

• Excessive left/right padding or negative margins may push the heading beyond the visible area.
• Reduce padding/margins or use Auto settings as a test.

4. Check for Non-Breaking Characters

• If you’ve copied text from an external source, it may contain non-breaking spaces ( ), dashes (—), or other characters that prevent line breaks.
• Replace them with standard spaces or use the plain text editor to remove formatting.

5. Responsive Settings

• Switch to Tablet or Mobile viewports and check if custom styles are applied that prevent wrapping (e.g., reduced container width with nowrap or fixed widths).
• Apply media-specific fixes if needed.

Summary

Your heading text is likely not breaking due to the white-space: nowrap setting, a fixed width container, or non-breaking characters. Adjust these in the Style panel to restore proper line wrapping.