Creating a mobile first website has become the standard nowadays. Tools like flexbox and grid-layout allow to build nice looking designs.

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

The problem

So what happens on mobile devices with a limited screen width?

Solution: ­ (U+00AD)

­, 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:

The alternative <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:

Future work

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.