【CSS】文字をはみ出させないword-wrap:break-wordとword-break:break-all
横幅固定のボックスに英語を入力した場合突き抜けて表示される場合があります。
そこで、CSSの「word-wrap:break-word」または「word-break:break-all」を使用することで折り返すことができます。
ちなみに、2つの違いは
「word-wrap:break-word」
必要に応じて単語の途中で改行します。
「word-break:break-all」
CJKはより緩やかな改行制限となる。非CJKはどこでも改行できる
だそうです。
ちなみに、CJKとは、中国語(Chinese)、日本語(Japanese)、韓国語(Korean)の頭文字をとったものらしいです。
参考:http://www.htmq.com/css3/word-break.shtml
要約すると、日本語は普通に改行、英語は単語に関係なく改行するということです。
【何も指定なし】
【word-wrap:break-wordを指定】
【word-break:break-allを指定】
上記を見ていただくとわかるように、英語を単語で区切るか途中でも区切るか という違いです。
サイトデザインによりどちらを利用するか選ぶといいでしょう。
そこで、CSSの「word-wrap:break-word」または「word-break:break-all」を使用することで折り返すことができます。
ちなみに、2つの違いは
「word-wrap:break-word」
必要に応じて単語の途中で改行します。
「word-break:break-all」
CJKはより緩やかな改行制限となる。非CJKはどこでも改行できる
だそうです。
ちなみに、CJKとは、中国語(Chinese)、日本語(Japanese)、韓国語(Korean)の頭文字をとったものらしいです。
参考:http://www.htmq.com/css3/word-break.shtml
要約すると、日本語は普通に改行、英語は単語に関係なく改行するということです。
【何も指定なし】
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
chrome IE8 IE9 opera Firefox IE10 Safari
あか あお きいろ みどり しろ
あか あお きいろ みどり しろ
chrome IE8 IE9 opera Firefox IE10 Safari
あか あお きいろ みどり しろ
あか あお きいろ みどり しろ
【word-wrap:break-wordを指定】
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
chrome IE8 IE9 opera Firefox IE10 Safari
あか あお きいろ みどり しろ
あか あお きいろ みどり しろ
chrome IE8 IE9 opera Firefox IE10 Safari
あか あお きいろ みどり しろ
あか あお きいろ みどり しろ
【word-break:break-allを指定】
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
chrome IE8 IE9 opera Firefox IE10 Safari
あか あお きいろ みどり しろ
あか あお きいろ みどり しろ
chrome IE8 IE9 opera Firefox IE10 Safari
あか あお きいろ みどり しろ
あか あお きいろ みどり しろ
上記を見ていただくとわかるように、英語を単語で区切るか途中でも区切るか という違いです。
サイトデザインによりどちらを利用するか選ぶといいでしょう。
著者:poroa | 投稿日:2016年09月28日 | カテゴリ:CSS