How can I achieve automatic hyphenation in headlines?

Support
1

Summary

I am new to MODX and recently have been working for a client whose website was made by another programmer with MODX. The problem is that in mobile view some very long headlines do not get hyphenated. The language is German.

Step to reproduce

Screenshot: Imgur: The magic of the Internet with a mobile view of the problematic page.

Observed behavior

The headline “Datenschutzkoordinatorin / Datenschutzkoordinator” exceeds the edges of the page.

Expected behavior

The headline should hyphenate.

How do I achieve a solution of this problem? Are there plugins for hyphenation for German words maybe? Or is there maybe an easier solution available?

2

Maybe you can do client-side hyphenation with a JavaScript library like Hypher.

3

You can use JoliTypo, CSS hyphens or shy.

4

You can try the css hyphens property. If the auto value doesn’t work (it might not because the word is capitalized) then you can try the manual value which lets you specify exactly where you want a hyphen.

You could also set responsive fonts so that on mobile the heading is small enough to fit the whole word. Personally I hate the look of a hyphenated headline, but I’m a native English speaker and I understand other languages don’t have the same conventions around hyphens.