折り返しのCSSを理解していなかった

css

ブログ内でソースコードを書いていますが、この部分にCSSで折り返しを指定しています。

問題なく見えていたのでoverflow-wrapをbreak-wordに指定していました。

するとスマホで表示したときに画面に収まりませんでした。

調べてみると「break-word は単語の途中では自動改行しません」とあり、長い単語の場合は上手く改行されない場合があるようです。

そこで、anywhereを設定すると上手く単語の途中でも開業してくれました。

理解をしないまま、使っていたので皆さんもご注意ください。