改行をコントロールするword-wrapプロパティは主要の最新ブラウザで有効
最近はword-breakするのにJSは使わないほうがいいみたい - Webtech Walker
という記事を見て、おお！全てのブラウザでword-wrap:break-word;が有効なのか！と嬉々としました。特に、お問い合わせフォームなどで、英数字が強制改行されないとレイアウトが崩れる原因になって、よくプログラム側で制御していたので、これは嬉しい。
word-wrapプロパティとは？
まず、word-wrapプロパティとは何かと申しますと、簡単に言えば、文章の改行方法を指定するものです。単語の途中で改行するかどうかを指定します。
word-wrapプロパティは確かIEが独自先行で実装してたと思ったのですが、CSS3で草案されていて、主要の最新のブラウザで実装されているようですね。
値には、narmal、break-allの２種類があり、意味は以下のとおりです。
- normal
- 英単語の途中で改行しない。表示範囲をはみ出す場合は表示範囲を拡張する。日本語は表示範囲に合わせて強制的に単語の途中でも改行する。
- break-all
- 日本語も英語も表示範囲からはみ出す場合は強制的に単語の途中でも改行する。
サンプル
朝起きると体がだるく感じた。とりあえず起きてみたものの、段々気分が悪くなってきた。熱を測ってみると39度7分もあった。「Oh, my God!」と僕はふざけて天を仰いだ。今日はどうしても外せない用事があるのだ。
abcdefghijklmnopqrstuvwxyz0123456789abcdefghijklmnopqrstuvwxyz0123456789@com.abcdefghijklmnopqrstuvwxyz0123456789@com. abcdefghijklmnopqrstuvw-xyz0123-456789@com.abcdefghijklmnop/qrst/uvwxyz0123456789@com.abcdefghijklm_nopqrstuvwxyz0123456789@com.
ハイフンとかスラッシュがある場合は、場所によってはそこで強制的に改行するみたいです。
禁則処理
文字のレイアウトで重要なのは、禁則処理です。禁則処理とは、例えば日本語で言えば、句読点が行頭にこないなど、作文を書くときによく注意された、文章を書く上での決まりごとですね。
ブラウザによってもこの禁則処理に若干の違いがあります。Safari、Chome、Operaでは、一般的な禁則処理は行われます。
しかし、firefoxでは、｢段々｣などの｢々｣が行頭にきてしまうことがあります。また、IEでは小さい｢っ｣が行頭にきてしまうことがあります。
あと、似たようなのに、word-breakプロパティというのもあります。これも同様に改行方法を指定するものなのですが、ブラウザで実装状況が異なるようです。詳しくは別の機会に。
