ほんっとにはじめての HTML5 と CSS3

今回は、単語の途中でも改行しちゃう「word-wrap: break-word」というCSSを紹介します。
長いけど別にどこで切ってもいい単語（URLなど）を表示する時に役に立ちます。

この word-wrapプロパティの他の値は、「normal（初期値）」だけ。

ブラウザは、word-wrap: normal なら 英語など外国語の場合、ブラウザは単語の途中で改行しないようになっています。「半角スペース」「-（ハイフン）」「/（スラッシュ）」などの直後で改行します。

ですが、URL やメールアドレスなど、どこで改行してもらってもOKな場合、手作業で <br> や <wbr> を入れるのも面倒です（ユーザの閲覧環境によって表示領域の幅は変わりますし）。
そんな時に、この「word-wrap: break-word」を指定しておくと、勝手に「1文字単位で領域幅に合わせて改行」できるようになります。

前回の<wbr>要素は、ブラウザに「単語を勝手に壊させず、改行していい所を指定」しました。
今回のCSS「word-wrap: break-word」は「単語を壊していいから、表示幅に合わせて改行」と指示します。

「word-wrap: break-word」を使ってみよう

サンプルを見てみましょう。あえて幅の狭いブロックを作っています。
break-word のほうは、単語の途中でも改行されています。

break-word

http://honttoni.blog74.fc2.com/blog-entry-21.html

normal

http://honttoni.blog74.fc2.com/blog-entry-21.html

HTMLはこちらです。

<dl>
<dt>break-word</dt>
<dd class="wrbreak">http://honttoni.blog74.fc2.com/blog-entry-21.html</dd>
<dt>normal</dt>
<dd class="wrnormal">http://honttoni.blog74.fc2.com/blog-entry-21.html</dd>
</dl>

CSSはこちらです。

#w-wrap {
	border:1px solid #ccc;
	padding:1em;
	margin:1em 0;
	width:150px;
	}
.wrbreak {
	word-wrap:break-word
	}
.wrnormal {
	word-wrap:normal
	}

日本語の場合は注意が必要です。
日本語で「word-wrap: break-word」が指定されていると、「。」や「、」が先頭になるように改行されたり、「キャッシュ」といった促音や拗音が先頭になって「キ」「ャッシュ」と改行されたりします。
こんなときは「word-wrap: normal」に戻しましょう。

次回予告

次回はHTMLに戻って、<bdo>要素を紹介します。
<bdo>は、文字の表示方向を指定する要素です。
普通、文字の表示は「左から右」ですが、ヘブライ語など「右から左」に表示したい箇所に使います。

関連記事

• [39] 全要素に使える「HTML5グローバル属性」を見てみよう
• [38-2] 「コンテンツ・モデル」一覧
• [38-1] 「コンテンツ・モデル」で要素のルールを見てみよう
• [37] HTML5要素の「カテゴリー」を見てみよう
• [36] コンテンツをまとめる figure と、そのキャプションの figcaption
• [35] 内容の区切りを示す hr 要素
• [34] 書字方向を指定する bdo要素と 書字方向を隔離する bdi要素
• [33-2] 単語の途中でも改行させるCSS「word-wrap: break-word」
• [33-1] 改行可能位置を示す wbr要素 を使ってみよう
• [32] その他のプログラム関連を示す samp、kbd、var、data要素
• [31-2] pre 要素と同じ表示をするCSS「white-space : pre」
• [31] code要素 と pre要素 でソースコードを表示しよう
• [30] 定義語を示す dfn要素 を abbr要素や dt要素と一緒に使おう
• [29] abbr要素で略語を示そう
• [28] blockquote要素で「引用されたブロック」を示そう

Tweet

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します！ (笑)