Add a soft hyphen into a collection

Community resources Product feedback
1

I used soft hypens like (&+shy+;+) in a Webflow Project without a Collection. I placed them manually and It worked fine!
A Gift for German texts. Because in German there are really long words.

Like “Webseitengestaltungsproblematiken” or even longer Ones. And yeah: On Mobile this can be a huge problem.

But with my new Project i need Collections and there the soft hypens don’t work.
Either in H1-H6 or P Tags nor in Richtext.

Any suggestions?
Thanks, Boris

PS: the old Design Help Forum Post «Add a soft hypen entity» is closed without any solution.

2

I opened the other forum post again if you want to bring solutions in it.

As for your issue, it needs to be taken care of by Webflow.

ping @cyberdave can you check what to do with this issue? Thanks.

3

Hi all,
I’m also in need of this solution. When hand-coding, it’s obviously easier to insert special characters, but with Webflow this is an issue right now.
I am working on a German language responsive site right now, and with words which need hyphenating (in the right place) when the text areas get reduced, this is causing really ugly line breaks and overflowing text.
I hope this can somehow be resolved.
Keep up the great work!
Steve

4

Would it be possible to see a few screenshots of situations where line breaks and overflow are ugly? thanks.

5

Hey Vincent,
Sure, attached a few here. I have the container elements set to overflow-hidden, but you can see the longer words need hyphenating, and with German the hyphens need to break the words in the right places. Manually inserting a soft hyphen would allow this, I believe?
Steve

42
42640×674 91.3 KB
04
04894×822 114 KB
36
36848×1296 294 KB
26
261312×1070 321 KB

6

Apologies for the larger screenshots, taken on a 5k retina display…

7

And the page in question, if you want to see it and scale it:

http://next-level-bikeshop.webflow.io/fitting

8

It’s not really a soft hyphen but could you use

.classname  {
    -webkit-hyphens: auto !important;
       -moz-hyphens: auto !important;
        -ms-hyphens: auto !important;
            hyphens: auto !important;
}

to create hyphens as needed site wide?

1 Like
9

Thanks for the help, but if i set manually soft-hyphens in the Collection-Fields they convert to regular text. This happens in the designer and in the editor mode.

On Text without a Collection behind it, the soft-hypens work. Except in Richtext fields.
Even without the code-snippet.

by the way. did i placed your snippet right?

41
41882×552 38.5 KB

59

10

Hi Prohaska,

On Text without a Collection behind it, the soft-hypens work. Except in Richtext fields.
Even without the code-snippet.

Would it be possible to share with me exactly how you do this? Thank you so much,

Steve

Steve Holmes
Creative Director

energi.design http://energi.design/

11

I did it simply by pasting ­ into the Text at every spot a regular german hyphen could come.

It’s manually and therefore I did it on titles only.

Check my project (still in wip)
Under «tätigkeiten» you’ll find some longer pagetitles like «Schwangerschaftsbetreuung» in the title sections:

https://preview.webflow.com/preview/arztpraxis-kreis-9?preview=707c49503dad7da8598ec2659f5faa97

12

Hey there,

Yes I wanted it also for titles only — but my text is rich text, so it appears not to work. Webflow, any possibility of getting this into a usable option in Rich text blocks also?

Thank you :slight_smile:

Steve

Steve Holmes
Creative Director

energi.design http://energi.design/

13

After a second or third look at the problem i found my mistake and a solution.
Thanks @jdesign.

I red this article and now it works: Managing hyphenation with CSS | Openweb.eu.org

I insert this as custom code in the project settings header and i also
set my language code to «de» for german. (which i haven’t done before)
It’s just right after the custom code section.

<style>
.my-class {
  word-break: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
  hyphens: auto;
}
</style>

I’m happy now!
And it’s even better than set the soft-hyphens manually.

2 Likes
14

Hey Boris,

NICE solution, sir! Thanks for posting. I have implemented this into the German site I was having long word hyphenation issues with, and it’s hyphenating. I don’t believe it’s hyphenating according to rules, it seems more random or generic. But some hyphenation is currently better than none…

Are you seeing the German words hyphenating as expected?

Steve

15

Hi Steve,

Well. It seems like it. I checked a little but not for too long… But i assume it’s not perfect yet. I do prefer it way more than before.

16

hey Boris,

Oh I totally agree, a far better option than not having at all. Thanks again so much for sharing that solution! :slight_smile:

Steve

17

It’s not working on my site.

I tried the custom code both in the general site custom code option and on the page specific custon code option. I did change the “my-class” part of the code. I also set the language code to es and also tried spa.

I created a class named Hyphenation and added only to some select CMS generated titles.

Any ideas?

18

did you check the Spelling?

lower-case written css classes worked on my site while CamelCase don’t.

19

Hi there! I found your entry regarding hyphenation. I have the same problems.
If I want all h1 has hyphenation, I have to set the language and insert in the custom code section:

<style>
h1 {
  word-break: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
  hyphens: auto;
}
</style>

Is this correct? Unfortunately it does not work. I want in general hyphenation for every text on the website, h1-h1, p etc.

20

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