text-overflow: ellipsisではみ出した文字列を三点リーダーで省略できる。画面サイズのバリエーションが増え続けているので、こういったなんとなくどうにかしてくれることを期待できるCSSプロパティーは積極的に使いたい。のだけど、これとtext-align: center (right)を組み合わせた場合、テキストの開始位置がChrome 28だけ変化する。
Demo: text-overflow: ellipsis and text-align
Internet Explorer 10とFirefox 23ではtext-alignプロパティーの値はどれでも同じ。Chrome 28ではcenterで少し、rightでは更にもう少しずれる。三点リーダーによる省略で余った余白をtext-alignプロパティーでどう扱うか、またはtext-alignとtext-overflowプロパティーの適用される順番という違いに見える。そのため省略された時にほとんど余白が余らないような状況だと違いはほとんど表面化しない。デモのようにかなりフォント・サイズが大きかったりすると、余白が増える可能性が上がるので目立つことが多い。グリフの幅が広い日本語などの文字では更に目立つ確率が上がることになる。
僕はChrome 28の挙動の方に違和感を感じた。またtext-overflowプロパティーの有無で位置変わるところや、センタリングの時の左右の余白が完全に均等ではないところ、::before擬似要素を加えるとずれが顕著になるサイド・エフェクトなども気になった。
text-overflowプロパティーの仕様には三点リーダーが収まらなかった時などの規定はあるけど、この余白の取扱いについては特に何も見つけられなかった。なので危険な組み合わせとして覚えておく必要がありそう。
あんまり関係ないけど、text-overflow: inner-ellipsisとかではみ出した時は真ん中を三点リーダーで省略してくれる未来が来ないかなとか妄想してる。来なそう。