Here's how to create custom word breaks using some HTML tags <wbr> and &shy


Original:


Without a custom word break the long word will still break - but at a point in the word that is needed for the width of the screen and you have no control over where that break occurs so it may be in a place that is illogical.

supercalifragilisticexpialidocious

With <wbr>

With <wbr> you can control where you want the break to occur ideally:

supercalifragilisticexpialidocious


With &shy

Using &shy you can control where you want the break to occur ideally but also indicate that you have deliberately broken the word at a specific point by the use of a hyphen. 

super­cali­fragilistic­expiali­docious

Change the width of the browser screen on desktop to see the difference