はじめに

HP制作をしている駆け出しエンジニアです。
文章が変な箇所で折り返されて悩んだことはありませんか？

PC表示ではいい感じに改行されるのに、スマホで確認すると最後の一文字だけ改行されてしまうなど...

この問題をCSSの1つのコードだけで解決できると分かったので備忘録として残します📝

自動的に折り返しを行うCSS

CSSのword-break: auto-phraseを使います。
word-break: auto-phraseを利用すれば、自動的にいい感じの文節の位置で折り返しをしてくれます。
なので、レスポンシブデザイン対応がめちゃくちゃ楽になります!!

私はHP全体的に対応させたかったのでbodyに対してword-break: auto-phraseを指定しました。

style.css

body{
    word-break: auto-phrase
}

ちなみに、　auto-phraseを使うためにはHTMLにlang='ja'を指定する必要があります。
日本語であることを明示しておく必要があるためです。

参考になれば幸いです!!