Streaming live at 10am (PST)

Add a soft hyphen into a collection


#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


#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?


#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?


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: https://openweb.eu.org/articles/managing-hyphenation-with-css

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.


#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?