检查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

问题在于确定文本的长度。它可以真的很长。目前它的最终边距为120％，但是当文本较长时，它将在动画时间结束时被剪切。有没有办法让它正常工作，不使用JS？

Answer 1

这是实现此<marquee> - 效果的方法：

.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>