The CSS hyphens property provides the best way to hyphenate and line break English and most other languages. It enables browsers to apply automatic hyphenation (and line breaking). It does so following
lang attribute or
hyphens and it's vendor prefixes are the only properties needed to implement hyphenation. word-break is used primarily in some Asian languages and word-wrap or overflow-wrap is used to wrap text only in the case of overflowing, like long URLs.
Browser Support: Partial, and requiring vendor prefixes. See the CSS hyphens caniuse compatibility table for details.
CSS Automatic Hyphens with hyphens: auto
For correct hyphenation, first specify a language in the HTML lang attribute:
or locally if your site has mixed languages:
<p lang="fr">Ceci est un paragraphe.</p>
Then enable hyphenation in the proper element(s). The property is inherited.
Hyphenator gives roughly the same results as CSS hyphens but it works in virtually any browser. Until a vast mayority of browsers support the hyphens property, hyphenator.js is probably the best solution.
Manual hyphenation occurs at hyphenation opportunities only. A break may occur at a literal hyphen (-) or a
­ characters. Remember manual hyphenation is the default. There is no need to add any CSS, just the HTML:
Hyphens and long URLs
hyphens: auto adds break points based on language. Some unintelligible strings like some URLS may not be broken and will end up overflowing. To prevent this from happening, use the overflow-wrap property along with hyphens:
word-wrap: break-word; overflow-wrap: break-word;