Erhalten Gesamt (Ignorieren Überlauf) Breite in CSS

Question

Gibt es eine Möglichkeit, die Gesamtbreite eines Elements in CSS zu erhalten - d. H., Wie groß wäre seine Breite, wenn es nicht overflow: hidden wäre?

Hintergrund: Ich versuche einige Elemente einzurichten, die beim Bewegen einen Marquee-ähnlichen Scroll-Effekt erhalten. Ich habe das meistens funktioniert, indem ich die text-indent Eigenschaft belebte, aber ich habe nicht die richtige Menge gefunden, um für text-indent zu verwenden. (Wenn ich 100% verwenden, verwendet es die Breite des Behälters, nicht das, was die Breite des Elements sein muss.)

JSFiddle link

Answer 1

Es gibt keine Möglichkeit text-indent in Bezug auf die Breite des Elements einzustellen es gilt, solange du seine Breite nicht kennst, soweit ich das beurteilen kann. (Quelle: MDN)

für Ihre Zwecke, würde ich vorschlagen, entweder Animieren die Breite eines ::before Pseudoelement:

.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 */ 
} 

Oder wenn Sie nicht das zusätzliche Element nichts dagegen haben, können Sie den Text setzen in einem inneren Element und animieren seine transform Eigenschaft mit translateX, die höchstwahrscheinlich etwas leistungsfähiger wäre.