省略記号よりも幅が狭い場合の省略記号の切り捨て

Question

次のCSSを使用して省略記号で切り捨てます。

.truncate { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

これは私のためにうまく動作しますが、要素の幅は省略記号文字の幅よりも小さいときに私が望むように動作しません。省略記号が切り捨てられることが予想されますが、代わりに元のテキストが省略記号なしで切り捨てられて表示されます。

たとえば、this JSFiddleを参照してください。

最小の幅でこの問題を回避することはできますが、切り捨てられたテキストの代わりに切り捨てられた楕円の文字を表示する簡単な方法があるのか​​どうか不思議です。

Answer 1

私はあなたと同じ問題を抱えていますが、切り捨てられた楕円の文字に切り捨てられた楕円の文字の幅のしきい値があり、幅のしきい値はfont-sizeの影響を受け、ブラウザの種類とは異なります。幅の閾値がわかっている場合は、元のテキストを置き換えるために手動で「...」を使用できます。ただし、幅のしきい値は不明です...