word-break・word-wrap・white-spaceがそれぞれどう動作するのかを調べてみました。
サンプルコード
HTML
<p class="box"> 獅子の神子たる高神の剣巫が願い奉る。 破魔の曙光、雪霞の神狼、鋼の神威を持ちて我に悪神百鬼を討たせ給え！ </p> <p class="box"> Once before, I had repeated the same time again and again, to wage war against that cruel fate. And in the end, with a single girl as a sacrifice, the cruel cycle of hope and despair was broken. The world was guided towards a new truth. Or so it seemed... </p> <p class="box"> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </p>
.boxに下記classを追加して、動作を確認してみます。
CSS
.word-break_break-all {
word-break: break-all;
}
.word-break_keep-all {
word-break: keep-all;
}
.word-wrap_break-word {
word-wrap: break-word;
}
.white-space_pre {
white-space: pre;
}
.white-space_nowrap {
white-space: nowrap;
}
word-break・word-wrap・white-spaceのデモページ
| word-break | 文章の改行方法について指定。 normal:英語は単語の途中で改行しないで、日本語は表示範囲に合わせて改行。初期値。 break-all:表示範囲に合わせて改行。 keep-all:単語の切れ目で改行。 |
|---|---|
| word-wrap | 単語の途中で改行するかどうかを指定。 normal:単語の途中で改行しない。初期値。 break-word:単語の途中でも改行。 |
| white-space | コード中の半角スペース・タブ・改行をどう扱うを指定。 normal:1つの半角スペースとして表示して、表示範囲に合わせて改行。初期値。 pre:そのまま表示。 nowrap:1つの半角スペースとして表示して、表示範囲に合わせて改行しない。 |
ブラウザによって微妙に挙動が違うことがあるようなので、注意が必要です。
【参考サイト】
コメントが承認されるまで時間がかかります。