How can I automatically hyphenate long words on my Webflow site, specifically in the "NDIS Services" section on the homepage? I have tried using a CSS code snippet on H3 but it doesn't seem to have any effect. Any suggestions or insights would be greatly appreciated. Thank you!
TL;DR
- Add a
lang="en"attribute to the<h3>using Webflow’s Custom Attributes panel. - In Page Settings > Custom Code > Head, add CSS:
h3 { hyphens: auto; overflow-wrap: break-word; }. - Ensure the text can wrap (not set to "nowrap") and test with real long words in supported browsers.
You're trying to enable automatic hyphenation for long words in the “NDIS Services” section, but applying a CSS rule to the <h3> hasn't worked. Here's how to correctly enable hyphenation in Webflow.
1. Use the Correct CSS Hyphenation Properties
To allow automatic hyphenation, you need to apply the following CSS properties:
hyphens: auto;overflow-wrap: break-word;(or legacyword-wrap: break-word;for broader coverage)- Ensure a language is declared via HTML or CSS (e.g.,
lang="en")
2. How to Apply This in Webflow
- Select the
<h3>or text element used in the NDIS Services section. - In the Style panel, scroll down to the Custom Attributes section.
- Add a custom attribute:
- Name:
lang - Value:
en(or your desired language code) - Then, go to Page Settings > Custom Code > Inside Page Head and paste the following CSS:
h3 { hyphens: auto; overflow-wrap: break-word; }
- Alternatively, set a custom class (e.g.,
.hyphenate) on your headings and target that in your CSS instead:
.hyphenate { hyphens: auto; overflow-wrap: break-word; }
3. Check for Browser Support and Conditions
- Automatic hyphenation only works in browsers that support it and when a valid language is declared.
- Most modern browsers support
hyphens: auto, but Chrome may require enabling the experimental “Hyphenation” feature. - Make sure the text is not set to "nowrap", and not housed within a flex/inline layout that prevents wrapping.
4. Verify with Real Content
- Test your changes with a real long word (e.g., “internationalization” or “electroencephalographically”), not placeholder text like “Lorem ipsum”.
- Refresh the staging or published site and inspect whether hyphenation occurs.
Summary
To automatically hyphenate long words in your NDIS Services section, apply hyphens: auto and overflow-wrap: break-word via custom CSS, and make sure you assign a correct language attribute like lang="en" to the element. This ensures proper hyphenation behavior across browsers that support it.
