CREATOR BLOG

CSS3時代のテキストの折り返し設定

CSS3時代のテキストの折り返し設定

CSS3では折り返し設定を制御できるプロパティが2つ

テキストの折り返し設定を制御できるプロパティはCSS3になってから2つ存在することになってしまっています。

overflow-wrapは、元々Microsoft IE独自拡張のword-wrapがCSS3の仕様策定の段階で、名称変更されたもので、word-wrapはoverflow-wrapの別名称とみなされているようです。

ただまだ、Internet ExplorerやFirefoxなどは、プロパティ名称としては「word-wrap」のみをサポートなので、後方互換の意味も兼ねてword-wrapを併記したほうがいいでしょう。
[参考]
http://caniuse.com/#search=overflow-wrap

[使い方例]

.content p {
word-break:break-all;
}
.content p {
overflow-wrap:break-word;
word-wrap:break-word;
}

word-breakとoverflow-wrap(word-wrap)の違い

word-breakとoverflow-wrap(word-wrap)は同じような設定をするプロパティなのですが、その動作が微妙に違っていたりします。

word-break:break-allの折り返しの法則

word-break:break-allでは、一切の禁則処理が解除されます。ボックスの横幅からはみ出す場合、すべての単語の途中で折り返しします。そのため、例えばとても短い単語(or,and,is)などの途中で折り返してしまい、英文としてとても読みづらい文章になってしまいます。
日本語でも行頭に句読点などが来てしまう場合があり、とても読みづらくなるケースが考えられます。

word-wrap:break-wordの折り返しの法則

word-wrap:break-wordもボックスの横幅からはみ出した場合、単語の途中で折り返しをします。こちらは可能な限り禁則処理を保持し、できるだけ単語途中での折り返しを避けるように表示します。
また、テーブルセルやfloatが指定されている要素では、横幅を設定していないと折り返しされないので、きちんと横幅を指定することが必要です。

 

    ▲ PAGE TOP