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

CSS デザイン

css_wrap

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

css_wrap_sample01

この対策には 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+ */
}

長文のテストです長文のテストです長文のテストです長文のテストです

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

CSS デザイン

関連記事