英数文字が画面端で折り返さない時の対処法

このエントリーをはてなブックマークに追加

英数文字で構成されるブロックが長い場合、widthの指定をしていても折り返さずにつけ抜けてしまう。

このような英数文字が画面端で折り返さない時の対処法です。

スタイルを１行追加するだけ

英数字が折り返さないような場合、iPhoneなどのデバイスでは右側に空白ができることがあります。

右側に隙間があく

対処法は、長い英数字が入る可能性があるところのスタイルに、 word-break のプロパティを追加するだけです。

CSS

code {
  word-break: break-all;
}

word-break: break-all;での折り返し

word-wrap で指定も可能ですが、 word-break とは若干表示が違ってきます。

CSS

code {
  word-wrap: break-word;
}

word-wrap: break-word;での折り返し

今回は段落の途中で code タグが出てくるような場合の折り返しで指定したのですが、 break-all のほうが日本語と英数関係なしに端に来たら折り返しをして、 word-wrap が日本語と英数字の堺で一度折り返しが入り、英単語が左端からスタートのような表示になります。その場合、英数字が長ければ画面端での折り返しがされます。

今回このブログでは word-wrap の方を使ってみることにしました。