【CSS】ボックスに収まりきらない文字を折り返す方法

小さめなボックスに長文のテキストやURLを入れると、折り返しされず
ボックスからはみ出てしまうことがあります。

この対策には white-space が使えます。

HTML

<div class="block">
	<p>長文のテストです長文のテストです長文のテストです長文のテストです</p>
</div>

CSS

.block {
	display: block;
	width: 200px;
	border: 1px solid #dd0000;
}
.block p {
	white-space: pre;           /* CSS 2.0 */
	white-space: pre-wrap;      /* CSS 2.1 */
	white-space: pre-line;      /* CSS 3.0 */
	white-space: -pre-wrap;     /* Opera 4-6 */
	white-space: -o-pre-wrap;   /* Opera 7 */
	white-space: -moz-pre-wrap; /* Mozilla */
	white-space: -hp-pre-wrap;  /* HP Printers */
	word-wrap: break-word;      /* IE 5+ */
}

これでボックスを突き抜けず、折り返しするようになりました！