Automatically Hyphenation for long Words

Hi there,

I need automatically hyphenation for long words or links (like “hyphens: auto;” in css). At the moment the words aren’t shown fully on a mobile device.

In webflow I can manage it with two textblocks. One for desktop with the long word and one for mobile with a hard-texted hyphen. But that this isn’t a good solution.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like

Add the following code to an code embed element in your project:

  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;

Just change the quotation marks for your element class (remove the quotation marks)


Thank you!
Can you say me where I can add code in webflow? Is this possible when the website isn’t published yet?

CSS code works anywhere in the designer and yes you can see the results right there before publishing the site.

1 Like

wow so simple! thanks!

1 Like

This does not work in my case :frowning:

See here:

But here it works (custom Coding, without Webflow):

What do I do wrong?

Kind regards

hey, what is my element-class? I want this code to work on my whole project. :slight_smile: @aaronocampo

Just adding a “not-so-geeky” solution, but this has worked for me.

I add the hyphen in the mobile view, where i need it to be, and then:

  1. mark it, click the brush icon to break the class
  2. give the class an own name, like “hyphen-text-mobile”
  3. Hide in mobile landscape mode and upwards. Voila.
    Skjermbilde 2023-02-20 kl. 11.31.42

Really still seems to be the best solution. All the hyphens: auto stuff will create some pretty weird words and breaks at some point. Cheers!