【CSS】レイアウトはバッチリなのに表示が崩れる。そんな時はbreak-word

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

幅や高さの指定がバッチリなのに何故か表示が崩れてしまうことがありませんか??

さらに言えば、内包する文字によって崩れたり崩れなかったりする、そんな時はこれを疑いましょう。

 

word-break(word-wrap)

これはCSSのプロパティで、コンテンツが改行されるタイミングを制御するのに使います。

特に問題になるのが英数字なのですが、このCSSプロパティを指定していないと、

一つなぎの英単語や英数字がコンテンツの幅に達しても改行されません。

例えば、行の最後、あと1文字か2文字くらいしか入らない部分に

Supercalifragilisticexpialidocious

こういった長い英単語を置いた場合、この英単語の終わりまでは改行せず、

その次の単語から次の行に移ります。

つまり、一つなぎの英単語や英数字の途中では改行を行わないために、本来の幅よりも文字がはみ出て、結果として表示が崩れるというわけです。

解決策

word-break : break-all; もしくは word-wrap : break-word; を指定してあげましょう。

それぞれの違いは

 

■ word-break : break-all;

行末に達したらそのタイミングで文字を区切り、改行する。

つまり、単語の途中でも改行をしますよ。ということです。

 

■ word-wrap : break-word;

行末に達したらその単語は次の行から表示される。

こちらは行末に達したら、その単語はその行には表示せず、

次の行から表示しますよ。ということです。

 

具体例

This is the example of css layout.

 

例えばこの文字列の layout という文字の途中で行末に達した場合、

■ word-break : break-all; の 場合

This is the example of css la

yout.   

単語の途中でもこのように改行されます。

 

■ word-wrap : break-word;  の 場合

This is the example of css

layout.

単語の途中では改行されずにその単語から次の行に移ります。

 

使い分け

基本的には word-wrap : break-word ; を使っておけば問題ないかと思います。

しかし、例えばURL や メールアドレスなど、一つなぎで非常に長くなってしまうコンテンツを内包する場合は

word-break : break-all; を使う方が適切だと言えるでしょう。

 

 

これに関しては、自分もうっかり存在を忘れてしまい ハマりがちなので、レイアウト崩れが発生した時など、思い出してあげましょう(^^;

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。