中途半端な位置で改行してほしくない! という場合の対処法。

ポイントとなるCSSは以下の2つ。

  • word-break: keep-all;
  • line-break: strict;

word-breakプロパティについて

normal
英語等は単語の途中では改行せず、単語の切れ目で改行されます。日本語・中国語・韓国語等は表示範囲に合わせて改行されます。このため単語の途中で改行されることもあります。

break-all
言語に関係なく表示範囲に合わせて改行されます。このため単語の途中で改行されることもあります。

keep-all
言語に関係なく単語の途中では改行せず、単語の切れ目で改行されます。

 

line-breakについて

normal
標準の禁則処理をします。

strict
厳密な禁則処理をします。

※ strictを指定すると、日本語の「ー」や「っ」でもちゃんと単語の一部として認識されます

 

また、これだけの指定だと「文字数の長い単語」があった場合にコンテンツ幅からはみ出してしまうので、以下のCSSと併用させて使用しましょう。

  • word-wrap: break-word;
  • overflow-wrap: break-word;

これらは基本的にresetスタイルでbodyなどにあらかじめセットされていることが多いかと思いますが、覚えておきましょう。

 

まとめ

.elem{
  word-break: keep-all;
  line-break: strict;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

 

 

WEMO
- Thank you for reading. -
エックサーバー 当サイトはエックスサーバーで運営しています。
mixhost 速度重視ならMixHostがオススメ!

コメント