タイトル通り、<wbr>タグが効かないってだけで根本的な解決策はありませんが、これを書いてる時点でこの情報がWeb上に見られなかったため残しておきます。
Webサービスを作る人なら分かると思いますが、メールアドレスやURLなど連続した半角英数をサービス上で表示させるためには結構欠かせないタグです。
もし有効な解決策をご存知の方がいましたら、コメントなど頂けると嬉しいです。
対策案
解決ではなく、ごまかすレベルの対策案をいくつか。
案1：「text-overflow:ellipsis」を使う
.ellipsis {
width:20em;
white-space:nowrap;
overflow:hiddne;
text-overflow:ellipsis;
}この方法の難点として、widthを固定値で設定しなければならないって点です。
レスポンシブ時代の昨今に入力値ひとつにwidth固定値って個人的には結構ありえないんですが、背に腹は代えられないかもしれません。
案2：「overlow:scroll」を使う
.scroll {
width:20em;
white-space:nowrap;
overflow:scroll
}データを略さずに全部表示しなければならない場合、ellipsisは論外になってくるのでこういう形に。
個人的に表示としてはellipsisよりもっとありえない感じしますが…
案3：もう箱全体伸ばす
.layout{
min-width:980px;
}これは至極簡単、大枠レイアウトを「width」でなく「min-width」で設定してしまい、内容物によって無限に伸びるようにしてしまう。
レイアウトはガッタガタになる可能性もありますが、データ部分の表示とのトレードオフです。
まとめ
調べたところ<wbr>タグって、今やお伽話として語られるだけの存在となったネスケの独自拡張で、そいつを勝手にIEも採用したうえで慣習的に使われ続けて、ようやくHTML5で正式採用されることになったようなのですが、肝心のIEが最新バージョンでいきなり使えなくなるという大チョンボですね。
なに一つまとまっていませんが、FUCK IEってことですよ。
MSはブラウザ開発もうやめちくり～～～！！！
いやほんと、対策は募集したいです。
