text-overflow: ellipsisとリンク

text-overflow: ellipsisプロパティを使った三点リーダーによる省略は、テキストを格納するコンテナー要素に対して指定することが多い。例えばp要素であったりli要素であったり。ただしその内容がすべてa要素のようなケースの場合、Chrome 29とInternet Explorer 10では三点リーダーがクリックできなくなるので、a要素をinline-blockにしてそこでtext-overflowプロパティを使った方が良い使うとクリックできるようになるけどアレ(追記あり)。

Demo: text-overflow: ellipsis and Link

Firefox 23ではいずれのケースでも三点リーダーの部分もリンクになる。対してChrome 29とInternet Explorer 10ではp要素に仕込んだ前者はリンクにならず、a要素に仕込んだ後者ではリンクになる。現在の最新である2012-01-17の仕様では特に規定はないのでどっちが正しいとかはなさそうがあり、どのようなケースであれクリックできるのは間違い。Firefox 23の挙動は開発者に優しい気はするけど、直感的ではないという印象。いずれにしても三点リーダーもクリックできた方が良いので、a要素に仕込むのが良い。

どのブラウザーでもリンクになってる場合に下線が引かれないのはちょっとアレな感じある。そしてどうやっても下線引けなさそうで辛い……。ChromiumではEllipsisBox does not respect all CSS text propertiesとしてイシューが立っており、パッチもあるので下線引かれるようになるのかもしれない。

あんまり関係ないけど、三点リーダーでの省略が発動した場合にのみ省略された文字がわかるようにツールチップを出したい。ネイティブ・アプリケーションではだいたいそうなってるし。ellipsis検知してtitle属性仕込むJavaScript書けば良いのだろうけど、ポーリングせずに検知する良い方法が思いつかない。text-overflowプロパティはUI絡みのプロパティということになっていることだし、ブラウザー側でどうにかして欲しい気がする。