在 CSS 中获取总（忽略溢出）宽度答案

【问题标题】：Getting total (ignoring overflow) width in CSS在 CSS 中获取总（忽略溢出）宽度
【发布时间】：2016-05-10 04:34:30
【问题描述】：

有没有办法在 CSS 中获取元素的总宽度 - 即，如果不是 overflow: hidden，它的宽度是多少？

背景：我正在尝试设置一些在悬停时会获得选取框式滚动效果的元素。我主要通过为text-indent 属性设置动画来实现这一点，但我还没有找到用于text-indent 的正确数量。（如果我使用100%，它使用的是容器的宽度，而不是项目需要的宽度。）

JSFiddle link

【问题讨论】：

如果在你的代码中隐藏元素没有问题，你可以在容器外复制相同的项目可见性：无；和溢出：可见；样式并使用 JavaScript 获取它的宽度。这将为您提供宽度，但在这种情况下，您会受到浏览器宽度在单行上的限制。

标签： html css width overflow marquee

【解决方案1】：

据我所知，除非您知道它的宽度，否则无法将 text-indent 设置为相对于它所应用的元素的宽度。（来源：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 属性设置动画，这很可能会稍微提高性能。

【讨论】：