テキストの折り返しを制御するプロパティはいくつかあります。その中でも、文字列(単語ベース)の折り返しを制御するoverflow-wrapプロパティを詳しく解説していきます。
word-breakプロパティについては文字列の折り返しを制御するword-breakプロパティ【CSS】を参照ください。
overflow-wrapプロパティとは
overflow-wrapプロパティはテキストがボックスからはみ出る際の文字列(単語)の折り返しを制御するプロパティです。可能な限り禁則処理が守られます。
※禁則処理とは、行頭や行末に特定の文字列が配置されたり、単語が分割されたりしないようにする処理の事です。
overflow-wrapプロパティは、以前Microsoft(IE)のために開発されたword-wrapプロパティを元に変更されたプロパティです。その為、word-wrapプロパティは現在は廃止となっています。
利用できる値
以下がoverflow-wrapプロパティで利用できる値となります。
normal
デフォルトの値です。単語間や区切りでの改行となります。
※英字の単語が分割出来ない場合が表示範囲からはみ出します。ブラウザにより挙動が異なる場合があります。
break-word
表示範囲内に英単語が収まりきらない場合は、単語の途中でも自動改行となります。
日本語はデフォルトと同じく、単語間や区切りでの改行となります。
最小の表示範囲の計算時に、単語分割によって導入された折り返し位置が考慮されます。
anywhere
基本的にbreak-wordと同じですが、最小の表示範囲の計算方法が異なります。
anywhereは最小の表示範囲の計算時に、単語分割によって導入された折り返し位置が考慮されません。
使用例
次にそれぞれの値の使用例を掲載いたします。
normal
p {
overflow-wrap: normal;
}北海道札幌市在住のフリーランスのWeb制作。コーディングやWordpressのカスタマイズ等のテクニックや困った時に確認できる分かりやすい解説を目標にして情報を発信していきます。
単語区切りの無い長い日本語。あああああああああああああああああああああああああああああああああああああああああああああ
Freelance web production based in Sapporo, Hokkaido. We aim to provide information on techniques such as coding and WordPress customization, as well as easy-to-understand explanations that you can refer to when you have a problem.
https://www.sample.com/abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
break-word
p {
overflow-wrap: break-word;
}北海道札幌市在住のフリーランスのWeb制作。コーディングやWordpressのカスタマイズ等のテクニックや困った時に確認できる分かりやすい解説を目標にして情報を発信していきます。
単語区切りの無い長い日本語。あああああああああああああああああああああああああああああああああああああああああああああ
Freelance web production based in Sapporo, Hokkaido. We aim to provide information on techniques such as coding and WordPress customization, as well as easy-to-understand explanations that you can refer to when you have a problem. If you have any opinions, comments, or requests regarding this blog, or requests for work, please use the form.
https://www.sample.com/abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
anywhere
p {
overflow-wrap: anywhere;
}北海道札幌市在住のフリーランスのWeb制作。コーディングやWordpressのカスタマイズ等のテクニックや困った時に確認できる分かりやすい解説を目標にして情報を発信していきます。
単語区切りの無い長い日本語。あああああああああああああああああああああああああああああああああああああああああああああ
Freelance web production based in Sapporo, Hokkaido. We aim to provide information on techniques such as coding and WordPress customization, as well as easy-to-understand explanations that you can refer to when you have a problem. If you have any opinions, comments, or requests regarding this blog, or requests for work, please use the form.
https://www.sample.com/abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
overflow-wrapプロパティとword-breakプロパティの違い
overflow-wrapプロパティとword-breakプロパティはどちらも改行を制御するためのプロパティになりますが、以下のような違いがあります。
overflow-wrap
表示範囲に収まらない場合、単語や区切りをベースに改行を制御します。
可能な限り禁則処理が守られます。
word-break
表示範囲に収まらない場合、単語や区切りをベースに改行を制御しますが、禁則処理を解除する事が可能です。
word-breakプロパティについては文字列の折り返しを制御するword-breakプロパティ【CSS】を参照ください。
overflow-wrapが効かない場合
主にoverflow-wrapが効かない場合があるのは以下の時となります。
displayプロパティの値がflexやinline-block、floatを指定している場合、positionプロパティの値がabsoluteの場合など、横幅が内容によって可変する時は効きませんので、widthやmax-widthを指定する事で回避可能となります。
また、テーブル要素にもoverflow-wrapは効きませんので、table-layoutプロパティの値をfixedにする事で回避可能となります。
さいごに
いかがでしたでしょうか。
改行の制御は文章の見やすさに直結しますので、私自身も全てちゃんと理解しているわけではないのですが、覚えておく事が必要です。
