Hyphenation via CSS

Design help General
1

Hi there,

I am a German Designer, and unfortunately the German language has very long words, which requires hyphenation, at best automatically.

After research here in the forum I found this CSS snippet which has to be pasted in the Custom Code section for the head and set the language to “de”:

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

</style>

I tried it with h1, but it does not work. In my sample website you will see a word “Musterabteilungsleiter”, which should be splitted. But it doesn’t, either in the Designer or in the published site.

Who can help? Many many thanks from a frantic German designer…

Here is my site Read-Only: https://preview.webflow.com/preview/muster-website?utm_medium=preview_link&utm_source=dashboard&utm_content=muster-website&preview=f192b62f555c66b6dad67f804bd1e750&mode=preview

Live site: http://muster-website.webflow.io/

2

It worked now. But the hyphenation of the language is beeing ignored and there are no hyphens. Any solution? :pleading_face:

1 Like
3

I have the same problem. Do you have a solution for this now?

4

I´ve got the same problem… no solution right now…

5

I am Dutch and ran into the same problem with the word: “Arbeidsmarktcommunicatie”.

The CSS solution works fine for me!
I have placed the script (see below) in the custom code in the section for the entire site.
It may depend on which browser you see it in. I mainly run Chrome.
And I have set the language code to “nl”.

Maybe it will help you, I hope so.

h1 { word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto; hyphens: auto;}

The website I used this CSS:

6

Hi,

You can use soft hyphens to suggest word breaks. See a demonstration below:
Margaret­Are­You­Grieving­Over­Goldengrove­Unleaving­Leaves­Like­The­Things­Of­Man­You­With­Your­Fresh­Thoughts­Care­For­Can­You­Ah­As­The­Heart­Grows­Older­It­Will­Come­To­Such­Sights­Colder­By­And­By­Nor­Spare­A­Sigh­Though­Worlds­Of­Wanwood­Leafmeal­Lie­And­Yet­You­Will­Weep­And­Know­Why­Now­No­Matter­Child­The­Name­Sorrows­Springs­Are­The­Same­Nor­Mouth­Had­No­Nor­Mind­Expressed­What­Heart­Heard­Of­Ghost­Guessed­It­Is­The­Blight­Man­Was­Born­For­It­Is­Margaret­You­Mourn­For

The hypens in the text are added automatically when needed (there’s a soft hyphen after each word) but are otherwise hidden. You can select the soft hyphen characters in the text but it is tricky since the character doesn’t take up any space. If you’re on MacOS you can find this character in the Character viewer:

  1. Place the text cursor where you want your soft hyphen
  2. Use Ctrl+Cmd+Space to open the Character viewer
  3. Search for soft hypen. It will be represented as a normal “-”
  4. Double click the character to insert it

(I don’t know if Windows have a similar tool, maybe someone else can advice?)

Here’s a demonstration, the first H1 has a soft hypen after “National” while second does not.
https://preview.webflow.com/preview/image-loading?utm_medium=preview_link&utm_source=designer&utm_content=image-loading&preview=e79e4ee43a2b5cc54818128b29157702&pageId=600ae2cb800bf3072eb73d01&mode=preview

Quick note regarding html

In html you can also use &shy; to insert this character. Webflow doesn’t support this in text blocks however (it will be displayed in plain text). But it will work in custom code/embed blocks.

2 Likes
7

That means, that there is no way to hyphen: auto in Webflow?

8

You can set it as custom css. Make sure to also select the correct language in the settings as hyphens in css use the “lang” setting of the active page/element.

Hyphens in css does have a lot of caveats however and they might not work as expected. They are not as powerful as hyphenation in Word, InDesign etc. I would therefore recommend soft hyphens on larger, shorter texts such as headers.

1 Like
9

@ollebrickarp Cool, thanks for that hint. That was it, now it works :smiley: