翻訳後に表示が崩れた場合は、まず同じページを原文と対象言語で開き、幅、高さ、折り返しのどこが変わったかを確認します。訳文を短くする前に、画面の制約と翻訳された内容を分けて調べます。
発生する言語と画面条件をそろえる
URL、言語、ブラウザー、画面幅、操作手順を記録します。原文でも起きるのか、特定の言語やページ構成だけで起きるのかを比較します。全言語で起きる場合も、共通の翻訳処理や設定が影響している可能性があるため、CSSだけが原因とは断定できません。
訳文の長さに加え、長い単語や空白の有無、フォントの高さ、後から読み込まれる要素を確認します。翻訳時にHTML構造や属性が意図せず変わっていないかもあわせて確認します。
開発者ツールで、文字を制限している指定を確認する
問題の要素と親要素を選択し、計算後の幅・高さやCSSを確認します。特に、固定幅や固定の高さ、折り返しを止める指定、はみ出した部分を隠す指定に着目します。
white-space: nowrap：折り返せずに横へはみ出していないかを確認します。
overflow: hidden：必要な文章やボタンの文字が切れていないかを確認します。
min-width：FlexboxやGridの子要素が縮まず、親からはみ出していないかを確認します。
line-height：文字の高さに対して行間が足りず、重なっていないかを確認します。
FlexboxやGridを使えば自動的に解決するわけではありません。子要素の最小幅や折り返し方も含めて調整します。仕様はMDNのmin-widthの説明を参照してください。
長い文字列の扱いは、内容に合わせて決める
URLなどの長い文字列には、必要に応じて
overflow-wrapの指定を検討します。すべての文章に強い分割指定を入れると、単語が読みにくくなる場合があります。言語ごとの自然な改行と、はみ出しへの対処を分けて確認します。MDNのoverflow-wrapの説明で動作を確認できます。ボタンや見出しは、幅を可変にする、複数行を許容する、余白を調整するなどの方法を試します。訳文そのものが冗長な場合は表現も見直しますが、条件や意味を削って無理に収めないようにしてください。
右から左へ読む言語は、方向と配置を確認する
文書全体が右から左へ読む構成の場合は、HTMLの
dir属性で基本方向を指定します。言語を示すlang属性だけでは、文字方向は指定されません。余白や配置には、必要に応じて開始側・終了側を扱うCSSの論理プロパティを使います。ロゴ、写真、数値、URL、方向を示すアイコンをすべて同じように反転するわけではありません。ページの意味に合わせて個別に確認します。W3Cの文字方向の解説が実装の参考になります。
修正した箇所と、共通部品の影響を再確認する
修正後は、問題が発生した条件で再現しないかを確認します。共通のCSSを変更した場合は、原文と他の代表的な言語、スマートフォンでも確認します。フォントの読み込み前後や、メニューを開いた状態も確認してください。
設計時の確認は多言語サイトの使いやすさ、テストの進め方は多言語サイトのテストと不具合調査で説明しています。