Put Korean body text in a narrow column and you will see lines breaking in the middle of a word. Nothing is grammatically wrong with it, but the reader loses the thread the moment a unit they were reading as one piece is split in two.
How browsers break Korean by default
Under the default word-break: normal, a browser treats the gap between any two CJK characters as a valid place to break. That rule exists because Chinese and Japanese have no spaces between words, so without it there would be nowhere to break at all — and for those languages it is correct. The catch is that Korean does use spaces. Its word units are already separated, so there is no reason to break between characters.
word-break: keep-all is exactly the value for this situation. It means “do not break inside a word”, and in Korean that keeps each space-delimited unit intact.
But Japanese and Chinese have no spaces
Here is the real trap. keep-all says “do not break inside a word”, and in a language without spaces the entire paragraph is one word. The declaration therefore means there is nowhere at all to break.
The failure is visible rather than subtle. The paragraph stretches into one enormous line, pushes through its container, inflates whatever grid track holds it, and the page gains a horizontal scrollbar. Because your Korean and English screens look perfectly fine, none of this surfaces until you turn on another language — typically the day you add a machine-translation widget or a Japanese page.
The two lines that belong with it
The fix is not to abandon keep-all but to provide an emergency exit alongside it.
body {
word-break: keep-all; /* protect Korean word units */
overflow-wrap: anywhere; /* if there is nowhere to break, break anywhere */
}
.card-grid {
display: grid;
/* minmax(0, 1fr), not 1fr — so a track cannot be inflated by its content */
grid-template-columns: repeat(3, minmax(0, 1fr));
}Using anywhere rather than break-word is the important detail. Both will break mid-character-run when they must, but only anywhere is taken into account when the element’s minimum content size is computed. With break-word, the layout engine still treats the paragraph as one indivisible chunk when answering “how narrow may this get?”, so the inflated grid track remains.
The same reasoning drives minmax(0, 1fr). A bare 1fr is really minmax(auto, 1fr), and that auto takes the content’s minimum width as its floor. One long paragraph, code block or URL raises the floor and the track grows with it.
Where to make exceptions
Not every element wants the same rule. Code blocks and URLs become unreadable when broken mid-string, so it is better to let them scroll inside their own box than to wrap them.
pre, code, .url {
word-break: normal;
overflow-wrap: normal;
white-space: pre;
overflow-x: auto; /* scrolling stays inside this box */
}If you have room for more, text-wrap: pretty (no orphan word at the end of a paragraph) and text-wrap: balance (even line lengths in headings) are worth adding. Both simply do nothing in browsers that lack them, which makes them safe improvements.
Layouts that collapse depending on language are covered further in the Themes & plugins archive, and finding this class of defect on a site already in production is part of the diagnostic in our optimization program.
Next part
Shapes and line breaks are settled; what remains is how the letters arrive. The next three parts are about webfonts, starting with what changes when you host them yourself.