まずは普通にこんな HTML を書きます
<!DOCTYPE html>
<style>
div {
width: 160px;
background: powderblue;
font-family: monospace;
}
</style>
<div>
aaaaa bbbbb ccccc ddddd eeeee fffff
</div>
幅が 160px しかないので 入り切らない部分はスペースの位置で改行されてこうなります
aaaaa bbbbb ccccc
ddddd eeeee fffff
スペースがない場合は
<div>
aaaaabbbbbcccccdddddeeeeefffff
</div>
折り返しされず 親要素のエリアをはみ出してすべてが 1 行で表示されます
aaaaabbbbbcccccdddddeeeeefffff
これの対処のために使われるものの一つが word-break です
word-break: break-all;
これをつけると結果はこうなります
aaaaabbbbbcccccdddddee
eeefffff
入り切らなくなるところで折り返ししてくれます
しかし これを使うと最初のようなスペースがある場合に問題が起きます
スペースで折り返されず ギリギリまで詰め込んで無理やり改行することになります
aaaaa bbbbb ccccc dddd
d eeeee fffff
コンソールみたいなところだとこれでいいのですが 通常の文章ではあまり見た目が良くないです
これを期待どおりにするのが overflow-wrap です
overflow-wrap: break-word;
これを設定すると 基本は通常通りスペースで折り返してくれて スペースがないような場合は入り切らなくなるところで折り返ししてくれます
aaaaa bbbbb ccccc
ddddd eeeee fffff
aaaaabbbbbcccccdddddee
eeefffff
なので基本は overflow-wrap を使うで良いと思います
また 特殊なケースで 記号のみの場合は word-break で折り返しされないというのがあります
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
みたいなものは word-break だと折り返されずはみ出します
overflow-wrap だと折り返しができます
記号と言っても折り返されるものとそうでないものがあります
確認用ページ
https://nexpr.gitlab.io/public-pages/word-break-chars/example.html
クエリパラメータで追加の文字を指定できるようにしてます
?chars=abc のように書くと a と b と c が追加されます
