Webflow sync, pageviews & more.
NEW

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
  • Apply hyphens: auto, overflow-wrap: break-word, and appropriate word-break to the target element via custom CSS if needed.
  • Ensure the lang attribute (e.g., en) is correctly set on the <body> or container element.
  • Use a font that supports hyphenation and test with actual long words in supported browsers.

You're trying to automatically hyphenate long words in the "NDIS Services" section of your homepage, but applying a CSS rule to the <h3> hasn't worked. Here's how to correctly set up hyphenation in Webflow.

1. Enable Hyphenation via CSS

  • Use the CSS property hyphens: auto; on the specific element (e.g., <h3> or any other tag).
  • Also set word-break: normal; or word-break: break-word; (depending on design needs).
  • Ensure overflow-wrap: break-word; is applied to help with natural line breaking.

2. Ensure Correct Language Setting

  • Hyphenation depends on the language attribute (lang) being set properly.
  • Go to the Webflow Designer, select the <body> or page-level wrapper, then:
  • In the Settings Panel, set the Language attribute (e.g., en for English).
  • Without the correct lang, auto-hyphenation will not apply.

3. Apply Custom Code in Project/Page Settings

  • If you used the Webflow Designer to apply CSS but it's not working, try injecting the CSS manually.

  • Go to Project Settings > Custom Code > Head and add:

    ``

  • Or, if you're targeting a class (e.g., .ndis-heading), use that instead of h3.

4. Use a Supported Font

  • Some web fonts don’t support hyphenation well.
  • Make sure you're using a font that supports automatic hyphenation, such as system fonts or commonly supported ones (like Roboto or Lato).

5. Check Browser Compatibility

  • Hyphenation behavior may vary slightly across browsers.
  • Chrome, Safari, Edge, and Firefox generally support hyphens: auto if lang is properly set.

6. Test with Real Long Words

  • Make sure the content has actual long compound words that need breaking.
  • Hyphenation won’t show results if the words naturally fit within the container.

Summary

To auto-hyphenate long words in the "NDIS Services" section, apply hyphens: auto with proper lang attributes, use supportive CSS properties like overflow-wrap: break-word, and ensure you're using hyphen-friendly fonts. Add your styles via custom code if the Designer isn’t applying them correctly.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
What is the best way to add Schema to clients' websites using Webflow, without having to export the files and manually add them to the code each time there is an update to the website?
Is it possible to redirect a page on my Webflow website to the URL http://krystle_svetlana.dribbble.com, and if so, how can I do it?
Why are my imported items duplicating on the live site in Webflow, but not in the designer or Collections folder?
Why can't I edit the text within a hover div in Webflow, even though I was able to do so before? I have tried in both Safari and Chrome browsers, with no success. Is this a Webflow bug or am I doing something wrong?
How can I make the hyperlinks in my rich text block within Webflow stick to the same line as the rest of the text, when the text is pulled from the collections editor?
What is the best method for creating diagrams like bar diagrams, pie charts, and line charts in Webflow? Thank you!
How can I fix the issue where my custom cursor gets stuck at the edge of the div on my Webflow CMS project pages when hovering over Vimeo videos?
How can I make the sign-up form modal in Webflow's homepage only appear once, either after initial load or after the user has signed up or closed out, and how and where can I insert the code to set a cookie?
How can I properly track form submissions on my Webflow site that come from Google Adwords? I have followed the steps provided by Google, but I am unsure about where to add the code and how to link it to the submit button. I have already attempted to add the code in the custom code section labeled "Inside tag". Can someone please help me with this?
How can I redirect my old domain to my new domain in Webflow after rebranding?
Has anyone found a solution to automatically update a user account access setting in Webflow based on manual verifications recorded in a Google Sheet? Thank you!
How can I add a timed transition to the gradient backgrounds of buttons in my nav and help page sidebar links in Webflow? The solutions I found in older posts haven't worked so far.
How can I make my form submit button open in a new tab after redirecting in Webflow?
Why does my Collection List Pagination in Webflow refresh to the top of the page?
How can I create social sharing buttons/links on dynamic templates in Webflow using custom code and the method described by ( )?
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
How can I dynamically redirect to a CMS created after form submission in Webflow?
In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!
How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?
How can I close a dropdown in Webflow when clicking on a link?
Is there a more optimal way to create a portfolio section with a sticky image container that changes as you scroll, similar to the design on Deveb's website, that works across different web browsers, especially Safari, using Webflow or any other JavaScript tools?
How can I implement a multi-select field with a pre-selected option in a popup form on a collection page using Webflow?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?