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

或者如果您不介意额外的元素，您可以将文本放在内部元素中，并使用translateX为其transform属性设置动画，这很可能稍微高一些。