text-overflowプロパティーは子のテキストのはみ出した部分をどのように制御するかを決定するもの。つまりテキストしか制御してくれないので、例えばその要素に背景を指定していて、かつ親要素ではみ出す方向にpaddingプロパティーが指定されていると、テキストの終わりと背景画像の終わりが一致しなくなる。
Demo: Overflowed Element's Background
デモでは背景色とlinear-gradient()を使った背景画像を指定したspan要素で、text-overflowプロパティーで三点リーダーによる省略を指定している。親要素にpadding-rightプロパティーで余白を確保すると、テキストは期待通り短くなるが、背景色や背景画像は短くならない。
以前に、リンクの下線をlinear-gradient()にした関係で似たような処理をしていたところで気付いた。「あれっ？」と少し思うけど、text-overflowプロパティーがテキストのみに作用するべきであることを考えると自然な動作であることはわかる。
どうやって解決しようか一週間くらい考えているけど、うまい方法がまったく思いつかない。こういう時は整理して書くと思いついたりしそうなので記事にしたけど、まだ思いつかない。