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 automatically enable hyphenation for long words or URLs in Webflow—so they're wrapped cleanly on mobile—you'll need to tweak the CSS settings using built-in tools and, if necessary, minimal custom code.

​

1. Enable Hyphenation via Typography Settings

​

Webflow doesn’t expose the full hyphenation control via the UI, but you can start with these steps:

• Select the text element (e.g., paragraph, heading, link block).
• In the Style panel, under Typography, ensure the Language property is set (e.g., English). Hyphenation depends heavily on language rules.
• While Webflow does not currently offer a toggle for "hyphens: auto" in the UI, this setting is still respected by modern browsers if manually applied.

​

2. Add Custom CSS Using Embed or Page Settings

​

To fully support automatic hyphenation, add this minimal CSS using either:

• A Page Settings > Custom Code > Inside <style> tag, or
• A Webflow Embed component with the CSS inside a <style> tag.

​

Here’s what to add (do not include raw code blocks, just the style behavior):

​

• Apply a hyphens: auto rule to the target text class. Also include overflow-wrap: break-word; and word-break: break-word; for better compatibility.
• For example, if your paragraph class is “body-text”, use this in your CSS:

​

• Set hyphens: auto;
• Set overflow-wrap: break-word;
• Set word-break: break-word;
• Optionally add -webkit-hyphens: auto; for Safari

​

Ensure the browser supports it and that a valid language is applied.

​

3. Optimize for Links and Long Strings

​

Links or unbreakable strings (like URLs) may still overflow. To break long links:

• Apply word-break: break-word; and overflow-wrap: break-word; to link elements.
• You can also add these styles globally using a class that applies to all anchors (e.g., .rich-text a).

​

4. Test on Mobile Devices and Browsers

​

• Preview in Webflow’s mobile view, but also test on real devices.
• Modern browsers like Safari and Chrome support hyphenation with correct CSS and language settings.
• Behavior may vary across browsers if language is missing or content is inside dynamic elements.

​

Summary

​

To auto-hyphenate and wrap long words or links in Webflow:

• Assign a proper language via Typography settings.
• Add custom CSS for hyphens: auto and break-word behaviors using an embed or page-wide style.
• Test across mobile browsers to confirm the layout adjustment works consistently.

​

This avoids manual hyphenation or multiple text blocks while keeping your layout responsive.