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
  • Add hyphens: auto; and overflow-wrap: break-word; via custom CSS targeting the correct H3 element in Webflow.
  • Set lang="en" on your HTML to enable proper hyphenation rules.
  • Use a hyphenation-compatible font and verify in supported browsers to ensure it works.

You're trying to automatically hyphenate long words in the “NDIS Services” section of your Webflow homepage, but applying a CSS rule (like on an H3 element) hasn't worked. Here's how to ensure hyphenation works correctly in Webflow.

1. Enable Hyphenation with Correct CSS Properties

  • Use these CSS properties to enable hyphenation:
  • hyphens: auto;
  • overflow-wrap: break-word; (as fallback)
  • In Webflow:
  • Select the H3 element (or the correct class used in “NDIS Services”).
  • Go to the Style panel, scroll to the bottom, and click “Custom code” (under Typography if visible).
  • Or go to Page settings → Before custom code, and target the class via custom CSS.

Example CSS for targeting an H3 in custom code:

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

2. Use a Language Attribute

  • Hyphenation relies on a valid language setting for the browser to apply correct breaking rules.
  • Make sure your HTML or Webflow page has a language set, such as:
  • Go to Page settings → under Advanced Settings (HTML tag), add:
    • <html lang="en">

3. Use the Right Font and Browser Support

  • Not all fonts support hyphenation. Try switching to a widely supported font like Arial or Roboto during testing.
  • Hyphenation behaves slightly differently in browsers:
  • Fully supported in Safari, Firefox, and modern Chromium-based browsers, but not reliably in older Edge/IE.
  • Test in multiple browsers to ensure hyphenation appears where supported.

4. Confirm You're Targeting the Right Element

  • Make sure that the CSS is actually targeting the element in question:
  • Double-check that the H3 in “NDIS Services” actually uses the class you’re styling.
  • Use Webflow’s built-in Navigator and Style panel to confirm.

Summary

To auto-hyphenate long words in the “NDIS Services” H3 section:

  • Use hyphens: auto; and overflow-wrap: break-word; in custom CSS.
  • Set a language attribute (lang="en") on your site or page.
  • Ensure your target element and font support hyphenation.
  • Test it in multiple browsers to verify rendering.

Following these steps should properly apply auto-hyphenation to your headings.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I use Webflow to replace the image in my button with an icon that is part of the button and still be able to add a link block?
How can I create a Collection List in Webflow that pulls in content from different Collections? We're rebuilding our eCommerce stores and need to display products from multiple categories in one list. For example, the 'View All Products' page should show all products from all Collections, and the 'Products under £100' page should display products from multiple Collections filtered by price. Is there a way to achieve this? Here is my public share link: <LINK>
What is the optimal method for managing images in Webflow? As a newcomer to Webflow, I am unfamiliar with image transformation abilities found in other CMS platforms. How can I achieve automatic resizing of logos in a Collection to dimensions of 200px by 100px, with a JPG quality of 85%? I am aware of setting a DIV background image, but that doesn't provide the same functionality. Do you have any recommendations or am I overlooking this feature within Webflow?
Why do I keep getting a "must be a valid video URL" error when entering video links from YouTube or Vimeo into the video link field of my CMS in Webflow? I've tried suggestions from previous closed tickets but the error persists. Even video links that work fine on the sample pages fail when entered into my CMS. The error appears as soon as I enter any text in the field. Any insights on how to resolve this issue?
What are some third-party tools and integrations that can be used with Webflow?
How can I disable vertical scrolling on desktop and mobile browsers using Webflow?
Can I design a site in Webflow with placeholder copy that clients can edit in while the site is still in development, and then revert back to static elements once all content is finalized and publish it as a normal website without incurring CMS costs?
How can I set the default starting slide to slide 2 in a Webflow slider without sharing the read-only link?
How can Webflow be configured to improve mail-client-friendliness and avoid emails being marked as spam when testing form emails?
How can I move the slider arrows in Webflow to a different position like in the attached picture?
How can I create two dropdown selectors in Webflow for a form, one for 'Location' and one for a hidden email response dropdown for Zapier and CRM integration?
How can I create a sign-up form field with an icon as a link in Webflow?
Why are two images in my Webflow portfolio-grid page displaying with different heights in Safari compared to Chrome and Firefox? The images were uploaded to the CMS as 800x600 pixels and I created responsive images using the CMD + SHIFT + I command. Other images have their responsive images included in the markup, but these two do not. Disabling custom scripts did not solve the problem.
What could be causing a glitch on all pages with anchors in Webflow?
How can I properly embed a green particle animation in my Webflow site using Codepen?
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!
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
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?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?