半角英数字が折り返されずオーバーする。word-break: break-all; overflow-wrap: break-word;

今回のメモは、チャット機能を備えたアプリを作った際の困りごとメモ。

チャットの文字数を例えば20文字として投稿したとします。
width幅は100pxと指定。

この際に、普通に
アイウエオアイウエオ
アイウエオアイウエオ

このようにwidthの設定をしてあれば決められた幅を過ぎた時点で折り返されます。

しかし・・・・・・・ここで困ったことになったのが。
半角英数字です。

例えば。

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaと入力したとします。
すると本来全角１０文字時点半角20文字時点で折り返されるはずが折り返されません。

チャット枠を飛び越えて・・・文字が表示されてしまいました。

そこで色々と調べた結果

CSSのbody設定すれば解決！
body {
word-break: break-all;
overflow-wrap: break-word;
}

簡単に説明を読んでみる。

禁則処理とは？

まず、「禁則処理」という言葉を理解しましょう。この意味は、「。」「、」「…」「？」などの文字を行頭や行末に来ることを避ける処理のことです。これらの記号が文章の最初に来るのは不格好です。それを防ぐ措置が禁則処理です。そして、「word-break」と「overflow-wrap」の違いには、これが大きく関係しています。

つまり、禁則処理を設定するか、しないかを強く意識したプロパティが「word-break」であり、「単語の折り返し」を強く意識したのが「overflow-wrap」です。

簡単に今回使った処理部分だけの説明を抜粋

■break-all　： 　これは非常に強力な値です。つまり、日本語であっても、英語であっても、幅に合わせて一切の単語が途中で折り返されます。特に英文は単語の途中でも折り返されるので読みづらくなるでしょう。

と書かれています。チャットなどの場合は問題なさそうなので、これを使いました。
英文などを載せたりする場合には微妙そうですね。

■break-word 　：　日本語の場合は幅に合わせて文字は折り返され、かつ、文字の途中で折り返されます。英語なら文章は、単語(各アルファベットではないことに注意)ごとに折り返されますし、長い単語はその途中で折り返されます。

日本語の場合は幅に合わせて折り返し。英語なら単語の場合切れないように考慮しつつ・・・折り返してくれるようですね。

ただ、意味もない、英数字の場合だと折り返されないので、word-break: break-all;なしだと
英数字がチャット枠を飛び越したままの状態のようです。

以上・・・メモでした。