CSSの合計幅（オーバーフローを無視した幅）を取得する

Question

CSSの要素の合計幅を取得する方法はありますか？つまり、幅がoverflow: hiddenではない場合の幅はどのくらいですか？

背景：私はマーキースタイルのスクロール効果を得るためにいくつかの要素を設定しようとしています。私はtext-indentプロパティをアニメーション化することでこれを主に動作させていますが、text-indentに使用する適切な量はわかりません。 （私は100%を使用する場合は、アイテムの幅があることが必要ではないものを、コンテナの幅を使用しています。）

JSFiddle link

Answer 1

要素の幅にテキストインデント相対を設定する方法はありませんあなたがその幅を知っていない限り、それは私が理解できる限り適用されます。 （出典：MDN）

あなたの目的のために、私は::before擬似要素の幅をアニメーション化するのいずれかを示唆している：

.marquee { 
    display: block; 
    overflow: hidden; 
    white-space: nowrap; 
} 

.marquee::before { 
    content: ''; 
    display: inline-block; 
    width: 0; /* This property can be animated to push the content to the right */ 
} 

それとも、余分な要素を気にしない場合は、テキストを入れることができます内部の要素で、のプロパティをtransformでアニメーション化します。これはおそらく若干パフォーマンスが向上します。