Fixing text overflow from long localized labels

WHAT THIS TESTS This checks practical internationalization and responsive CSS skill. German strings are often thirty percent or more longer than English, so the interviewer wants layouts that flex and a testing approach that catches overflow before it ships.

A GOOD ANSWER COVERS First diagnose: the layout likely uses a fixed width or height sized for English, so the longer German label overflows or clips. Fixes: avoid fixed dimensions; let containers size to content using flexible layouts like flexbox or grid with min and max width and flex-grow so buttons and labels expand. Allow wrapping with overflow-wrap or word-break and optionally hyphens for long compound German words. Where space truly cannot grow, use controlled truncation: text-overflow ellipsis on a single line or line-clamping for multiple lines, but only for non-critical text, and pair with a tooltip or title so meaning is not lost. Prevention: design with flexible components, reserve generous space, and crucially test with pseudo-localization, replacing strings with padded or accented variants, so overflow surfaces during development rather than in the German study. Verify with the longest expected translations.

COMMON WRONG ANSWERS Hard-coding a wider fixed width for German, which breaks other languages. Truncating the meaningful label with ellipsis and losing information. Assuming all locales fit English-sized components. Shrinking font size globally as the only fix. Never testing with non-English strings before the study.

LIKELY FOLLOW-UPS What is pseudo-localization and how does it help. When is truncation acceptable versus harmful. How do right-to-left languages add further layout concerns.

ONE CONCRETE EXAMPLE The settings button has a fixed pixel width fitting 'Settings', but 'Benutzerdefinierte Einstellungen' overflows. You change the button to size to its content with flexbox, set a min-width, and allow the label to wrap to two lines with overflow-wrap. For a fixed-height nav item where wrapping is impossible, you apply single-line ellipsis plus a title attribute. Then you run pseudo-localization across the build, padding every string, and catch three more components that would have broken in German before the study begins.