HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード

HTMLタグボードのトップへ戻る ゼロから始めるホームページ作成講座 訪問者優位のWEBデザインTips インターネットで小遣い稼ぎ 今すぐ使える!便利ツール(HTMLタグ辞典など)


英単語の途中の改行の処理を指定する

CSSの書き方

word-wrap:値 ;

CSSの詳細情報
プロパティ名 word-wrap 読み方 ワード・ラップ
初期値 normal 意味 単語手動改行
normal/break-word
対象 すべての要素
CSSレベル IE独自 対応ブラウザ Windows MAC
継承 する IE 5.0以上 SF

解説

文章中の途中で英単語の改行をするかどうかを指定するスタイルシートです。IE独自のプロパティですが、Safariも対応しています。ただし、一部の値で両ブラウザの挙動が異なります。

break-wordの場合

「word-wrap」プロパティの値に「break-word」を指定した場合の挙動ですが、両ブラウザとも要素内に英単語が収まりきらない場合は単語の途中で改行されます。

normalの場合

一方、「word-wrap」プロパティの値に「normal」を指定した場合は、InternetExplorerでは要素内に英単語が収まりきらない場合は改行できる部分まで要素の幅が伸びて、単語と単語の間で改行されます。

また、Safariでは、要素に英単語が収まりきらない場合でも、要素は拡大せず、収まらない部分は要素からはみ出して表示されます。(overflowプロパティに依存)

CSS/HTMLサンプル

p { word-wrap:break-word; }

段落要素の英単語は途中で改行するよう指定 サンプル