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?

If a div with a width of 320 pixels contains a long heading that doesn't wrap unless double-clicked, it’s likely due to a CSS property preventing word breaking. Here’s how to troubleshoot and fix it:

1. Check the Heading’s White-Space Property

• Select the heading element in Webflow.
• Go to the Style panel > Typography section.
• If white-space is set to nowrap, change it to normal to allow wrapping.

2. Inspect the Overflow Setting

• Still in the Style panel, scroll down to the Layout section.
• If Overflow is set to Hidden, Scroll, or Auto, change it to Visible to ensure the text can wrap correctly.

3. Adjust the Word Break Properties

• If the issue persists, apply word-break: break-word or hyphens: auto in Custom CSS:
• Go to Page Settings > Custom Code (inside the <style> tag).
• Add:
  ```css
  .your-heading-class {
  word-break: break-word;
  hyphens: auto;
  }
  ```
• Save and publish to see if the text now wraps properly.

4. Test in Different Viewports

• Check how the heading behaves in tablet and mobile views.
• If needed, set a max-width of 100% to prevent text from overflowing outside the container.

Summary

The issue is likely caused by white-space: nowrap or incorrect overflow settings. Adjust these properties to allow text wrapping, and if needed, apply word-break or hyphenation rules via custom CSS.