word-wrap:インライン要素に対して単語の途中で改行処理を行うかどうかを指定する

初期値 normal
適用対象 置換要素を除くインライン要素
継承 する
アニメーション 離散値
対応ブラウザ caniuseで確認

word-wrapプロパティの説明

word-wrapは、インライン要素に対して単語の途中で改行処理を行うかどうかを指定します。例えば、長い単語などのテキストが行ボックスから溢れそうな時に、ブラウザーが自動的に折り返すのか、そのままコンテンツ・エリアを貫通させて表示するかを選択できます。

本プロパティの機能は、overflow-wrapに引き継がれました。当初、Internet Explorerが独自に採用した後、多くのブラウザも実装しましたが、現在は改名されてoverflow-wrapに置き換わった事になっています。

word-wrapに指定できる値

normal
通常の改行規則に則って折り返しを行います。テキストがコンテンツ・エリアから触れる場合、空白で区切られた単語の間で改行し、連続するテキストはそのまま折り返さずに表示します。これが初期値です。
anywhere
通常は折り返しが発生しない箇所であっても、要素からテキストが溢れることを防ぐために自動的に改行を行うことがあります。長い単語やURLが改行される場合、ハイフンは挿入されません。コンテンツの最小固有寸法を計算する祭には、単語の分割によって導入された折り返し可能位置を考慮します。
break-word
通常は折り返しが発生しない箇所であっても、要素からテキストが溢れることを防ぐために自動的に改行を行うことがあります。ただし、コンテンツの最小固有寸法を計算する祭には、単語の分割によって導入された折り返し可能位置を考慮しません。

word-wrapの使い方とサンプル

word-wrapプロパティの構文は以下の通りです。

CSS
/* キーワード値 */
word-wrap: normal;
word-wrap: anywhere;
word-wrap: break-word;

/* グローバル値 */
word-wrap: inherit;
word-wrap: initial;
word-wrap: revert;
word-wrap: unset;

word-wrapの実例

それでは実際にword-wrapプロパティの書き方を見ていきましょう。本来、この機能はoverflow-wrapに引き継がれているため、実際に使用する場合はoverflow-wrapを採用して下さい。

表示確認
CSS
.samp_box {
	overflow: auto;
	padding: 0 1rem 1rem;
	background-color: #eee;
}
.samp_box > section {
	overflow: auto;
	margin: 1rem 0 0;
	padding: 0 1rem 1rem;
	background-color: #fff;
}
section > h1 {
	margin: 1rem 0 0;
	font-size: 1rem;
}
section > p {
	width: 200px;
	margin: .5rem 0 0;
	border: 1px solid #999;
}
#ww_1 {
	word-wrap: normal;
}
#ww_2 {
	word-wrap: anywhere;
}
#ww_3 {
	word-wrap: break-word;
}
HTML
<div class="samp_box">
	<section>
		<h1>word-spacing: normal;</h1>
		<p>Text text text text. <span id="ww_1">KonoNagaiTangohaTekitounaMojiretsudesu</span>. Text text text text.</p>
	</section>
	<section>
		<h1>word-spacing: anywhere;</h1>
		<p>Text text text text. <span id="ww_2">KonoNagaiTangohaTekitounaMojiretsudesu</span>. Text text text text.</p>
	</section>
	<section>
		<h1>word-spacing: break-word;</h1>
		<p>Text text text text. <span id="ww_3">KonoNagaiTangohaTekitounaMojiretsudesu</span>. Text text text text.</p>
	</section>
</div>

word-wrapに関連するCSSプロパティ

文字揃え・段落の振る舞い
direction 文字表記の方向(左右)を指定する
hanging-punctuation 句読点、括弧、引用符などの禁則処理を指定する
letter-spacing 文字同士の間隔を指定する
line-break 句読点や記号などの禁則処理を指定する
line-height 行の高さを指定する
tab-size タブ(tab)文字の表示幅を指定する
unicode-bidi Unicodeのアルゴリズムを上書きして文字表記の方向を変更する
white-space 要素内のホワイトスペースの扱い方を指定する
word-break 要素の幅を超過するテキストの自動改行について指定する
word-spacing 単語同士の間隔を指定する
word-wrap インライン要素に対して単語の途中で改行処理を行うかどうかを指定する
writing-mode テキストの書字方向やブロックのフローを指定する
widows ブロックが区切られた場合に次の行の先頭に表示される内容の最小行数を設定する