Firefox3.1（3.5）では半角文字の途中でも改行できる
category : Web > CSS
個人的には興味がない話題なのですが、調べたついでにエントリー。
なんとなくYahoo!BBのトップページにアクセスしたのですが、微妙に名前部分の表示が崩れていたのが気になりました。
どうやらIDの途中で改行コード（<br>）が挿入されているのが原因のようです。
なんでbrタグを挿入しているのかというと、おそらくですが、FF3.0はword-wrapやword-breakが反映されないため、半角英数字の連続が途中で改行されず、表示が崩れる場合があるからだと思われます。その対策なのでしょう。
この手の表示崩れ対策を行っているサイトはけっこうあります。手段もいろいろあり、途中にbrタグを挿入、細かくwbrを挿入、unicodeのサイトなら幅0の空白を挿入、などが挙げられます。
しかし個人的には、brやwbrを挿入したりするのはなんとなく邪道な気がします。htmlは見栄えを制御するものではなく、文字に意味づけを行うための仕組みだからです。
表示崩れを気にするのなら文字を途中でカットするなりすればいいわけですし、もし本当に1行にすべてを表示しなければならないような情報なら表示領域を広げればいいのに、と思います。
mixiでは表示名が、最大文字数で入力してもちゃんと一行で収まるようになっています。
友だち一覧部分では表示が崩れることがありますが、無理矢理に改行タグを挿入したりしていません。htmlのルールを守っているからだと思われます。
さて、ここからが本題なのですが。
Firefox3では半角文字が連続したときにテキストが改行されませんが、FFの次バージョンである3.1（3.5）では、CSS3に対応している（らしい）こともあり、改行の指定が反映されて表示されるようです。（サンプルコード）
これで、特殊な手段で対応する必要もなくなりそうですね。
ちなみにIE8のβバージョンでは、word-wrapが正常に動作しませんでした。試す場合は正式版でどうぞ。
なんとなくYahoo!BBのトップページにアクセスしたのですが、微妙に名前部分の表示が崩れていたのが気になりました。
どうやらIDの途中で改行コード（<br>）が挿入されているのが原因のようです。
なんでbrタグを挿入しているのかというと、おそらくですが、FF3.0はword-wrapやword-breakが反映されないため、半角英数字の連続が途中で改行されず、表示が崩れる場合があるからだと思われます。その対策なのでしょう。
この手の表示崩れ対策を行っているサイトはけっこうあります。手段もいろいろあり、途中にbrタグを挿入、細かくwbrを挿入、unicodeのサイトなら幅0の空白を挿入、などが挙げられます。
しかし個人的には、brやwbrを挿入したりするのはなんとなく邪道な気がします。htmlは見栄えを制御するものではなく、文字に意味づけを行うための仕組みだからです。
表示崩れを気にするのなら文字を途中でカットするなりすればいいわけですし、もし本当に1行にすべてを表示しなければならないような情報なら表示領域を広げればいいのに、と思います。
mixiでは表示名が、最大文字数で入力してもちゃんと一行で収まるようになっています。
友だち一覧部分では表示が崩れることがありますが、無理矢理に改行タグを挿入したりしていません。htmlのルールを守っているからだと思われます。
さて、ここからが本題なのですが。
Firefox3では半角文字が連続したときにテキストが改行されませんが、FFの次バージョンである3.1（3.5）では、CSS3に対応している（らしい）こともあり、改行の指定が反映されて表示されるようです。（サンプルコード）
これで、特殊な手段で対応する必要もなくなりそうですね。
ちなみにIE8のβバージョンでは、word-wrapが正常に動作しませんでした。試す場合は正式版でどうぞ。
