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.

Greetings,
Kira


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:

<style>
   ."YOUR-ELEMENT-CLASS" {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  }
</style>

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

2 Likes

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

Hi
This does not work in my case :frowning:

See here:
https://preview.webflow.com/preview/siag-prototype-standard?utm_medium=preview_link&utm_source=designer&utm_content=siag-prototype-standard&preview=44e06814f517d55e32f0f007a2e16143&workflow=preview

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

What do I do wrong?

Kind regards
Alain

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