多言語サイトに便利:word-breakプロパティ

  • 公開日:2017.03.05
  • 更新日:2020.04.22
  • Cording
多言語サイトに便利:word-breakプロパティ

多言語サイト制作の際は、bodyにword-breakプロパティの設定が必要です。

word-break: normal;

英語等、単語の途中で改行されると不自然な言語では、単語の切れ目で自動改行されます。
英単語の途中で改行させないcssスタイル設定なので、多言語サイトではこちらの設定をしておきましょう。
日本語・中国語・韓国語等は指定した幅の中で改行されますので、単語の途中で改行されることもあります。

word-break: break-all;

言語に関係なく、指定したエリアの幅に合わせて表示されます。
単語の途中で改行されることもありますので、多言語サイトには向きません。
日本語サイトの場合は、ダミーでアルファベットのテキストだけ(texttexttext…など)を入れたりすると、
指定した範囲から突き抜けて表示されるため、表示崩れしているという指摘につながることになります。

word-break: keep-all;

どの言語でも、単語の切れ目で改行されます。

Cordingカテゴリの最新記事