What could be causing the wrapping issue for a div with a width of 320 pixels and a long heading inside that only wraps when the text is double-clicked in Webflow?
TL;DR
- Set the heading’s white-space property to normal and ensure no hidden inline styles are forcing nowrap.
- Use word-break: break-word for long unbroken text and review container overflow and flex settings.
- Test in preview or publish mode to rule out Designer rendering glitches.
A wrapping issue where a heading inside a fixed-width div (320px) only wraps when double-clicked is usually caused by a styling conflict or rendering problem in Webflow's Designer.
1. Check White Space Settings
- Select the heading element, go to the Style panel, and check the white-space property.
- If it's set to nowrap, the text will stay on one line and not wrap.
- Fix: Set white-space to normal (or don’t define it at all if not needed).
2. Max Width vs Fixed Width
- Confirm whether the parent div is set to fixed width (e.g., 320px) and not just max-width.
- A max-width allows the container to scale down, possibly causing unexpected behaviors depending on sibling elements or flex/grid settings.
3. Check for Overflow Settings
- Inspect if the heading or parent div has overflow set to hidden or visible with flex styling that prevents natural wrapping.
- Fix: Set the offending container's overflow to auto or rework the flexbox settings.
4. Look for Inline Styles or Character Issues
- If the heading was pasted in from another source (e.g., Word or Google Docs), it may contain hidden inline styles forcing no-wrap behavior.
- Fix: Delete and retype the heading directly in Webflow, or use the "Remove Formatting" option.
5. Designer Sync Issue
- Occasionally, Webflow’s Designer fails to live-render correct wrapping until you force a redraw (as happens when double-clicking).
- Fix: Try preview mode, or publish it to the staging site and verify if the bug persists outside Designer.
6. Long Word Without Break Opportunity
- If your heading is a long, uninterrupted string (e.g., “Supercalifragilisticexpialidocious”) without spaces, it won’t auto-wrap due to default browser behavior.
- Fix: Add CSS like word-break: break-word; to the element via custom code or apply the “Break Words” utility from built-in Webflow classes.
Summary
The wrapping issue is likely caused by a white-space: nowrap style, long unbroken text, or a Designer rendering glitch. Fix it by adjusting white-space to normal, applying word-break rules, and checking for hidden inline styles or container overflow.