web creating

POROA

【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
要約すると、日本語は普通に改行、英語は単語に関係なく改行するということです。

【何も指定なし】
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

chrome IE8 IE9 opera Firefox IE10 Safari

あか あお きいろ みどり しろ

あか あお きいろ みどり しろ

【word-wrap:break-wordを指定】
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

chrome IE8 IE9 opera Firefox IE10 Safari

あか あお きいろ みどり しろ

あか あお きいろ みどり しろ

【word-break:break-allを指定】
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

chrome IE8 IE9 opera Firefox IE10 Safari

あか あお きいろ みどり しろ

あか あお きいろ みどり しろ

上記を見ていただくとわかるように、英語を単語で区切るか途中でも区切るか という違いです。

サイトデザインによりどちらを利用するか選ぶといいでしょう。
著者:poroa | 投稿日:2016年09月28日 | カテゴリ:CSS
  • ■同じカテゴリの記事
  • ■よく見られている記事
■最新記事
■カテゴリ一覧
CSS
Excel
Google Analytics
HTML
jQuery
PHP
SEO
WordPress
ホームページ作成
ホームページ作成講座
未分類
楽天
■アーカイブ
2018年9月
2016年12月
2016年11月
2016年10月
2016年9月
2016年8月
■ランキング