テキストの折り返しを制御するプロパティはいくつかあります。今回はその中のword-breakプロパティを詳しく解説していきます。
overflow-wrapプロパティについては文字列(単語)の折り返しを制御するoverflow-wrapプロパティ【CSS】を参照ください。
word-breakプロパティとは
word-breakプロパティは、テキストがボックスからはみ出る際の文字列の折り返しを制御するプロパティです。禁則処理を解除する事が可能となります。
※禁則処理とは、行頭や行末に特定の文字列が配置されたり、単語が分割されたりしないようにする処理の事です。
利用できる値
以下がword-breakプロパティで利用できる値となります。
normal
デフォルトの値です。既定の禁則処理(改行規則)となります。
大体のブラウザで英字は単語間で、日本語では全ての文字間での改行となります。
break-all
英字、日本語関わらず、全ての文字間で自動改行となります。
keep-all
英字、日本語関わらず、全ての単語間で自動改行となります。
break-word
overflow-wrapプロパティの値とは関係なく、overflow-wrap: anywhere;とword-break: normal;を指定したのと同じ効果となります。overflow-wrapプロパティについては、文字列(単語)の折り返しを制御するoverflow-wrapプロパティ【CSS】を参照ください。
※break-wordの値は非推奨となっています。
使用例
次にそれぞれの値の使用例を掲載いたします。
normal
p {
word-break: 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-all
p {
word-break: break-all;
}北海道札幌市在住のフリーランスの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
keep-all
p {
word-break: keep-all;
}北海道札幌市在住のフリーランスの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
overflow-wrapプロパティとword-breakプロパティの違い
overflow-wrapプロパティとword-breakプロパティはどちらも改行を制御するためのプロパティになりますが、以下のような違いがあります。
overflow-wrap
表示範囲に収まらない場合、単語や区切りをベースに改行を制御します。
可能な限り禁則処理が守られます。
overflow-wrapプロパティについては文字列(単語)の折り返しを制御するoverflow-wrapプロパティ【CSS】を参照ください。
word-break
表示範囲に収まらない場合、単語や区切りをベースに改行を制御しますが、禁則処理を解除する事が可能です。
さいごに
いかがでしたでしょうか。
word-breakプロパティを指定する場合は、英字、日本語共に改行が制御できているか注意が必要です。
