How can I automatically enable hyphenation for long words or links in Webflow to ensure they are fully displayed on mobile devices without the need for multiple text blocks or hard-coded hyphens?

To ensure long words or links break correctly on mobile in Webflow, you can enable automatic hyphenation using built-in text styling and a custom CSS tweak.

1. Use Webflow’s Built-In Text Wrapping Settings

• Select the Text Element (e.g., paragraph, heading, link block).
• In the Style Panel, scroll to the Typography section.
• Under White Space, choose Normal or Pre-wrap to allow wrapping.
• This ensures the browser can insert line breaks where appropriate.

2. Add Custom CSS for Hyphenation

Webflow doesn't yet offer direct controls for full hyphenation, so you need to add a small custom CSS rule:

• Go to your Page Settings or Site Settings › Custom Code.

• In the Inside tag section, paste the following CSS:

  * { hyphens: auto; word-break: break-word; overflow-wrap: break-word; }

• This enables automatic hyphenation and ensures long strings (like URLs) break without layout issues.

• Note: Hyphenation only works on certain languages (like English, German, etc.) and is browser-dependent.

3. Set the Correct Language for Hyphenation

• Automatic hyphenation depends on the language attribute of the element or page.
• In Webflow:
• Go to Page Settings › Advanced Settings.
• In the HTML tag > Language attribute, set it to "en" for English or the appropriate language code.
• Alternatively, select an element, add a custom attribute:
• Name: lang
• Value: en

4. Avoid Manual Breaks and Multiple Text Blocks

• Don’t manually add hyphens or additional divs for wrapping.
• The CSS and smart browser behavior will take care of wrapping long links or compound words seamlessly.

Summary

To enable automatic hyphenation in Webflow on mobile, use normal white space, apply custom CSS with hyphens: auto, and set the lang attribute for proper browser support. This prevents text overflow without requiring manual formatting.