However, there is still one problem the machine can not take from you: Long words
Imagine your users start using words like this: SchiffsKapitänMützenFabrikantenTochter
So what happens on mobile devices with a limited screen width?
­, short for soft hyphen, is invisible if there is enough space, but inserts a
- if the line has to be broken a that point.
We can also use the Unicode character (U+00AD), which is fun because it also works in most editors:
<wbr> or zero width space (U+200B)
<wbr> has a similar behaviour, but does not insert the dash.
Also, it does not work with internet explorer 8-11 (it works with 6 and 7).
We can also construct the same result with ZWSP:
To me it would be very interesting to see a more programs inserting soft hyphens into user generated content to prevent these kinds of design breaks.
Instead of designers simply adding
overflow: hidden; and essentially hiding peoples texts.