CSSで文節が切れるようになった話

レスポンシブで変な改行が入ると全部切っちゃうタイプのコーダー、オガワです。

改行の調整を行う時、brにPC用、TB用、SP用…とclassを振ることありますよね。
個人的にはあれをするのがすごく苦手で、入れるぐらいなら切ってしまえ！となりがちでした…笑
Xをボケーっと見ていたところ、最近のCSSではもうそんなことをしなくて良くなったらしいです！
今回はその方法について検証してみたいと思います！

▽参考にしたポストはこちら

使うプロパティは「word-break: auto-phrase」

改行指定をするCSSプロパティの「word-break」の値を「auto-phrase」にすることで文節で切ってくれるらしく…
実際に検証してみました！

こちらは弊社のブログ一覧ページ。
記事のタイトル部分に記述を追記してみたところ…

かなり正確な日本語の文節で改行されていますね！
これはbr地獄から解放される予感がします！

「word-break: auto-phrase」を使う時の注意点

最初、codepenで検証をしようとしたのですが全く効かず…。
SNSでの話題は嘘だったのか！？と思い調べたところ、htmlタグにlang属性をきちんと指定しておく必要があるそうです。
（日本語であればlang="ja"を指定する必要があります）

▽参考サイト

まとめ

日本語はかなり難しい言語だと思っているのですが、ここまで正確に改行されるのはすごいなと感動してました！
lang属性で言語の指定さえしっかりとしてあれば多言語をしているときに自分がいまいちわからない言語でも上手い感じに改行してもらえそうなので、活用していきたいですね！