Automatically Hyphenation for long Words

Design help General
1

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
2

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
3

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

4

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

CleanShot 2020-07-02 at 14.23.07@2x
CleanShot 2020-07-02 at 14.23.07@2x696×836 45.2 KB

1 Like
5

wow so simple! thanks!

1 Like
6

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

7

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

8

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
2 Likes
9

@Henrik93
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!