X
  1. TOP
  2. CSSで文節が切れるようになった話
2024.06.18

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"を指定する必要があります）

▽参考サイト

CSSのword-break: auto-phraseで日本語の分節で自動改行できる

まとめ

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

この記事をシェアする

<

FigmaでWebPが書き出せるようになった話

CSSのホバーを工夫するようになった話

>

関連記事

おすすめ記事

RECOMMEND

CATEGORY

TAG

CATEGORY

TAG

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

© 2020 spiqa design

×