Translated text is rarely the same length as the source. German and Dutch run noticeably longer than English, Finnish and Russian longer still, and Chinese and Japanese much shorter. A layout that fits its English text exactly has nowhere to put the extra, so it wraps, overflows or clips. Nothing is wrong with the translation; the design had no slack in it.
Where it shows up first
Navigation. A menu that just fits in English wraps to two lines, or items slide under the logo. The most common single symptom.
Buttons and calls to action. Fixed-width buttons clip their label, or the text wraps and the button grows taller than the row it sits in.
Cards in a grid. One card's heading takes an extra line and that row's cards stop matching height.
Tables. Column headers are short words in English and phrases elsewhere, so a table that fitted starts scrolling.
Anything absolutely positioned. Overlay text, badges and ribbons are placed for one string length and do not move when the string changes.
Fixing it
Let containers grow. Replace fixed width and height on text-bearing elements with min-width, min-height or nothing at all. This one change fixes most cases.
Target the language, not the site. The <html> element on a translated page carries a lang attribute, so you can adjust only the language that needs it and leave the others alone. The value includes the region in lower case, such as de-de, de-at or es-mx, so match on the start of it rather than the whole value:
/* Give the German nav more room without touching other languages */
html[lang^="de"] .site-nav a {
font-size: 0.9rem;
letter-spacing: -0.01em;
}
To style one region only, match the full value: html[lang="de-at"].
Allow long words to break. Compound nouns in German and Finnish can exceed a narrow column on their own:
.card h3 {
overflow-wrap: break-word;
hyphens: auto;
}
Check right-to-left separately. Nine of the supported languages flip direction, which is a different class of problem from length. See Right-to-left languages.
When the text itself is the problem
If one translation is far longer than it needs to be, shorten that string rather than reworking the design. Editing it by hand is the direct fix, and it sticks: normal page translation never replaces a string that already has a translation. Choosing Retranslate with AI on that row does replace it. See Edit translations manually.
For a term that should not have been translated at all, and is now stretching a button, a glossary rule keeps it as-is everywhere. See Glossary rules.
Checking before you launch a language
Open two or three of your most layout-dense pages in the longest language you support, at a narrow window width. German is a good stress test if you have it. Whatever survives that usually survives everything else.