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

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

長い単語やURLを任意の位置で改行する

 ブラウザごとに、長い単語やURLは「/(スラッシュ)」または「-(ハイフン)」の位置で改行されるが、「/」や「-」を含まない場合は改行が入らない。「/」などに関係なく、長い単語やURLの任意の位置に改行を入れるようにするには、CSS 3のword-wrapプロパティを利用する。

 たとえば、次のサンプルは長い単語やURLに対して「word-wrap:break-word」と指定したものだ。これにより、word-wrapプロパティに未対応のOperaを除いて、各ブラウザでの長い単語やURLを任意の位置で改行できるようになる。なお、Internet Explorerはバージョン5.5から、Safariはバージョン2からword-wrapプロパティに対応しているが、Firefoxはバージョン3.1(ベータ版)からの対応となっている。

Internet Explorerでの表示 Internet Explorerでの表示
Safariでの表示 Safariでの表示
Chromeでの表示 Chromeでの表示
Firefox 3.1(ベータ版)での表示 Firefox 3.1(ベータ版)での表示
p{
word-wrap: break-word;
}

[1] Hello, it is fine today. It had been raining, but finally, good weather. It says "this_is_a_long_long_long_word_with_no_white_space".

[2] http://www.www.www/aaaaaaaaaaaaa/bbbbbbbbbbbbbbbbbbbbb/cccccccc.html

[3] http://www.www.www/abc-ddddddddddddddddddddddddddd-eeeeee.html

[4] http://www.www.www/abc_ddddddddddddddddddddddddddd_eeeeee.html

ブラウザで表示を確認する

 word-wrapはもともとInternet Explorerが独自拡張したプロパティだったが、CSS 3の草案「Text」に取り入れられ、他のブラウザでもサポートされるようになった。

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]