はじめに
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'を指定する必要があります。
日本語であることを明示しておく必要があるためです。
参考になれば幸いです!!