こんにちは、ワタナベです。
今回は、テキストをキリの良いところで改行させたい時のテクニックの備忘録。
以前、spanとdisplay:inline-blockの記事を書いておりますが、別の方法になります。
SAMPLE
See the Pen
Untitled by Akiho (@wcaotdaenpaebne)
on CodePen.
1番上のテキストがspanを使用した方法、2番目がwbr、3番目がauto-phraseを使用した方法になります。
wbr
wbrは改行をしてもいい位置を指定するのに使用するタグです。ただし、改行が必要ない場合は改行されません。
wbrを使っただけではwbr指定箇所以外でも改行されます。
そこで、CSSで「word-break: keep-all;」を設定します。
単語内の折り返しを無効にする設定です。（句読点等でのみ折り返しされます）
こちらを設定すると改行が必要なブラウザ幅になった時に、wbrを指定した部分で改行してくれるようになります。
spanを使用した方法より手間がかからず、時短になります。しかしこのままだと、ブラウザ幅やテキスト量などによってはテキストが折り返されずにレイアウトが崩れる場合があります。
そこで念のため、「overflow-wrap: anywhere;」を設定し、改行が必要となったときは折り返すようにします。
word-break: auto-phrase
こちらはブラウザが自動的に適切な位置で改行してくれます。
使用する箇所に「lang=”ja”」属性を指定し、CSSで「word-break: auto-phrase;」を設定します。
brを使用しない画期的な方法です！
………が、こちらも万能ではなく、単語によっては意図しない箇所で折り返しがされたり、対応ブラウザが少ないという欠点があります。
主要ブラウザだと、ChromeとEdgeでは対応されています。
▼現在の対応ブラウザ
以上になります。
webでのテキスト本文の改行問題はぶっちゃけ仕方ないのですが、気になってしまうのもまた事実ですよね。
「word-break: auto-phrase」の対応ブラウザがもっと増えることを願うばかりです(笑)
▼THANKS！
それではまた次回。
皆様メリークリスマス＆良いお年を(^^)/
ご閲覧ありがとうございました♪
