「URLなどが途中で折り返しされず表示枠をはみ出てしまう」問題を解決するCSSが紹介されていたので試してみた
category : Web > CSS
海外のサイトで『Wrapping Long URLs and Text Content with CSS』という、長いURLやテキストの途中でも、枠をはみ出すことなく折り返すCSSを紹介する記事を見つけたので、実際のサービスで使えるの？という視点で試してみました。
ちょっと前に『Firefox3.1（3.5）では半角文字の途中でも改行できる』でも書きましたが、 ブラウザによっては、記号を含まない半角文字列やURLを途中で折り返すことなく、表示枠をはみ出して表示してしまうことがあります。
対策として、文中に強制的に改行を入れたり、<wbr>タグを挿入したりしているサービスもあります。しかしこれは、コードが冗長になってしまいエレガントではないという問題が発生しますし、なにより構造化言語であるhtmlの趣旨に反してしまっています。
また、<wbr>を単純に一定文字数ごとに挿入することで句読点が行頭に来てしまい、可読性を損なってしまう場合もあるようです。（どうせやるなら、せめて禁則処理ぐらいすればいいのに、と思ったりもします）
個人的には「ちゃんと折り返されないのは、ブラウザがそう解釈してるんだから仕方ないじゃん」と思います。
しかし企業が提供するサービスではそうも言ってはいられず、「ユーザーの名前やIDはすべて表示しなければならない」などの厳格なレギュレーションが規定されていることがあり、対応しないといけないもののようです。
ということで、前述のCSSが、この問題の救いの神になるのかどうか試してみました。
より実際の使い方に近い動作にするため、
を各種ブラウザで確認してみました。
ブラウザで動作を確認したい場合やコードを確認したい場合はこちらをどうぞ。
結論ですが、このCSS、使ってもいいけど、別に無理に使う必要はないんじゃないの？となります。ここまで長々と書いておいてなんですが…。
表示結果を見て、最初は「すばらしい！」と思ったのですが、今回のこの表示結果って前回のword-wrapを利用したときと同じなんですよね。
ならば、word-wrapを使った方がCSSが簡潔になるので、そちらのほうが良いと思います。
（word-wrapとwhite-spaceってどう使い分けるんだろう…？ 折り返しルールの制御ならやはり“wrap”ってついてるほうなんでしょうか）
word-wrapプロパティに限ってはIE6も先行対応してたりします。Firefox3.0は未対応ですが、これは特に問題にならないでしょう。
ちなみに下記のようなささやかな問題もありますので、念のために書いておきますね。
なにかの参考になれば幸いです。
「URLなどが途中で折り返しされず表示枠をはみ出てしまう」問題とは？
ちょっと前に『Firefox3.1（3.5）では半角文字の途中でも改行できる』でも書きましたが、 ブラウザによっては、記号を含まない半角文字列やURLを途中で折り返すことなく、表示枠をはみ出して表示してしまうことがあります。
対策として、文中に強制的に改行を入れたり、<wbr>タグを挿入したりしているサービスもあります。しかしこれは、コードが冗長になってしまいエレガントではないという問題が発生しますし、なにより構造化言語であるhtmlの趣旨に反してしまっています。
また、<wbr>を単純に一定文字数ごとに挿入することで句読点が行頭に来てしまい、可読性を損なってしまう場合もあるようです。（どうせやるなら、せめて禁則処理ぐらいすればいいのに、と思ったりもします）
個人的には「ちゃんと折り返されないのは、ブラウザがそう解釈してるんだから仕方ないじゃん」と思います。
しかし企業が提供するサービスではそうも言ってはいられず、「ユーザーの名前やIDはすべて表示しなければならない」などの厳格なレギュレーションが規定されていることがあり、対応しないといけないもののようです。
表示確認
ということで、前述のCSSが、この問題の救いの神になるのかどうか試してみました。
より実際の使い方に近い動作にするため、
- preタグ以外のタグでも動作するか（今回はddタグで試しています）
- 文中に空白スペースが含まれている場合はどうか
- 日本語の場合はどうか
- リンクが挿入されている場合はどうか
を各種ブラウザで確認してみました。
ブラウザで動作を確認したい場合やコードを確認したい場合はこちらをどうぞ。
safari4（mac）
Firefox3.6（mac）
Google Chrome5（mac）
IE8（win）
IE7（win）
IE6（win）
Opera10.5（mac）
Opera9.27（mac）
まとめ
結論ですが、このCSS、使ってもいいけど、別に無理に使う必要はないんじゃないの？となります。ここまで長々と書いておいてなんですが…。
表示結果を見て、最初は「すばらしい！」と思ったのですが、今回のこの表示結果って前回のword-wrapを利用したときと同じなんですよね。
ならば、word-wrapを使った方がCSSが簡潔になるので、そちらのほうが良いと思います。
（word-wrapとwhite-spaceってどう使い分けるんだろう…？ 折り返しルールの制御ならやはり“wrap”ってついてるほうなんでしょうか）
word-wrapプロパティに限ってはIE6も先行対応してたりします。Firefox3.0は未対応ですが、これは特に問題にならないでしょう。
ちなみに下記のようなささやかな問題もありますので、念のために書いておきますね。
- 半角スペースなどの特殊記号が含まれるとどうしてもそこで折り返されてしまう
- “word-wrap: break-word;”を指定しなければいいのかな？と思ったが、なにも変化はなかった
- しかし実際のサービスで、これが問題になることはほとんどないと思われる
- IE以外のブラウザで過去のバージョンだとうまく折り返されない場合がある
- しかしIE以外のブラウザを使っている人のほとんどはブラウザを最新バージョンにしているであろうし、シェアも低いので考慮しなくて良いと思われる
なにかの参考になれば幸いです。
