長い単語やURLの改行をコントロールするword-wrapプロパティ

エ・ビスコム・テック・ラボ
2008-10-29 18:07:01
  • このエントリーをはてなブックマークに追加

word-wrapとword-breakプロパティの違い

 CSS 3ではword-breakプロパティを利用して、任意の位置に改行を入れることもできる。ただし、word-wrapプロパティが長い単語やURLの場合にだけ改行を入れるのに対して、word-breakプロパティではすべての単語に改行を入れるようになる。

 たとえば、次のサンプルはword-wrapの代わりにword-breakプロパティを指定したものだ。この場合、[1]のテキストを見ると短い単語の途中にも改行が入るようになったことがわかる。

Internet Explorerでの表示。SafariとChromeでも同じように表示される Internet Explorerでの表示。SafariとChromeでも同じように表示される
p{
word-break: break-all;
}
ブラウザで表示を確認する

 なお、SafariとChromeでは「word-break: break-word」と指定すると、「word-wrap: break-word」と指定したときと同じように長い単語やURLの場合にだけ改行を入れることができる。ただし、CSS 3の草案ではword-breakプロパティに「break-word」という値は定義されていない。

Safariでの表示。Chromeでも同じように表示される Safariでの表示。Chromeでも同じように表示される
p{
word-break: break-word;
}
ブラウザで表示を確認する
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]