The hyphens CSS property can help the browser break words across multiple lines and insert hyphens as it deems fit. However, it's possible to suggest 'line break opportunities' to the browser using 'soft hyphens'. In HTML, these are written as ­.
The ­ character is not rendered visibly.
.break-word { hyphens: auto; /* Lets the browser break words, but prioritises soft hyphens if present */ hyphens: manual; /* Break only on predetermined hyphens */ hyphens: none; /* Don't break words */ }
There's also a <wbr> HTML element which can be used for suggesting line break opportunities, but this works a bit differently.