省略記号 '...'の値が正しい色ではありません

Question

必要に応じて各行の最後に3ドットの '...'という表があります（テキストオーバーフロー）。私はtext-overflowプロパティの省略記号の値を使用しました。それは動作します：ウィンドウのサイズが変更されたときに、「...」示したが、私は2つの問題を持っている私のテーブルの行が含まれている場合スパン：

• 「...」フォントの色に着色されているがスパンの
• は「...」

はデモはこちらをご覧くださいスパンのフォントのサイズにリサイズされていますhttp://jsfiddle.net/Ah4DR/1/

を多分これは初心者の質問ですが、私は時間を検索し解決策は見つかりませんでした。

これは、のInternet Explorerでは動作しませんが、Chromeでは正常に動作すると言いました。

ありがとうございます！

Answer 1

確かにIEのバグのようです。省略記号の色を決定するのは、（何らかの理由で）最初の要素の色を読み取ることです（または、おそらく最初の内容です）。しかし、私はバグの "回避策"を見つけました。私はIE（とあなたがtext-overflow上を使用しているだけtd要素）を標的とするいくつかの方法でこれを設定可能な場合にお勧めしますが、コンセプトの証明として、これはそれを修正します。

td:before {content: ''; color: black;} 

どうやら最初td色を定義するコンテンツは、擬似コンテンツが機能するため、実際のコンテンツである必要はありません。

Answer 2

私は同じ問題がありました。私のテキストは暗い灰色で白いですが、省略記号の色は黒色に見えました。テキストオーバーフロー：省略記号が含まれているものの色を設定するだけで解決しました。

.ellipsis-div { 
    white-space: nowrap; 
    width: 154px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    color: white;  /* --> ellipsis color */ 
}