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

word-wrap

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; }

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

【厳選】合わせて読みたいおすすめ書籍

WEB制作支援サイトのHTMLタグボードだからオススメできる厳選書籍です。私が読んでいない本はオススメしません。

HTMLやCSS、Webデザインを体系的に学ぶなら

CSSを駆使したモダンなWebデザインを学ぶなら

最新情報をチェックしよう!