display:flexをかけて、flex-shrink:1をかけても文字がはみ出た時などにかけるCSS
overflow-wrap: break-word;
長い単語やURLが幅に収まらない場合に、単語単位で折り返しを行います。
word-break: break-all;
単語の途中であっても、どこでも強制的に改行を入れて折り返します。
white-space: pre-wrap/white-space: normal
デフォルト(normal)の設定で、テキストが自然に折り返されます。改行やスペースを意識して適切に折り返しを行います。
white-space: normal;（デフォルト）では通常の折り返しが行われます。white-space: pre-wrap;では、改行コードやスペースをそのまま表示し、テキストが親要素に収まるように折り返します。
line-break
line-break: anywhere;では、単語の途中でも改行されることを許可します。line-break: strict;では、単語の境界で改行されます。
日本語や漢字を使ったテキストで適切な折り返しを行いたい時に使用しますが、英語やアルファベットにはあまり影響しません。