css - 检查 CSS 中的文本长度

Question

我想知道是否有一种方法可以检查文本的长度，以便我可以在我的 CSS 动画中使用此信息。怎么回事？我有一个带有副标题的框:

字幕明显比方框长。我在将动画向左移动并显示其余文本后触发了动画(我使用 Stylus):

@keyframes title-scroll
0%
    margin-left 0
17%
    margin-left 0
100%
    margin-left -120%

.m-focus
    .title
        -webkit-animation title-scroll 6s linear infinite none running

问题在于确定文本的长度。它真的可以很长。目前它的最终 margin-left 为 120%，但当文本较长时，它会在动画时间结束时被剪切。有什么方法可以让它正常工作，不使用 JS？

Answer 1

这是实现此目的的方法 <marquee> -ish 效果:

.marquee {
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
}

.marquee span {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 5s linear infinite;
}

@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

<div class="marquee">
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
</div>