Long words or URLs can break your layout — especially on mobile. CSS offers three properties to control this behaviour.
p {
overflow-wrap: break-word;
word-break: normal;
hyphens: auto;
}Allows the browser to break a word at any character if it does not fit on one line. It activates only as a last resort — normal wrapping is still preferred.
Keeps default word-breaking behaviour. Use break-all only for code blocks or data tables — for regular text normal is the correct choice.
Automatically inserts hyphens when breaking words, based on language rules. Requires the correct lang attribute on your <html> element — e.g. lang="de" for German or lang="sk" for Slovak.
p, h1, h2, h3, h4 {
overflow-wrap: break-word;
word-break: normal;
hyphens: auto;
}lang on <html> — hyphenation depends on it.word-break: break-all for prose — it breaks mid-word unnecessarily.hyphens: auto support varies by browser.
