Html 通过CSS的多分区水平选框

我正在为我运行的比赛服务器制作一个记分板，它是用英文写的。在记分板上，如果一个用户或团队的名称超过12个字符，我会将CSS类应用于该团队或用户的得分

div

，以强制其滚动

问题是，如果名称的长度不同，我最终会看到不同的元素以不同的方式滚动，经常会出现部分滚动（如果有意义的话，可能是“过度滚动”，它会环绕另一个过程），闪烁然后重新启动，还有一些并不总是从

div

中滚动出来

我正在寻找想法和建议。CSS绝对是我的弱点。以下是应用于超过12个字符的所有元素的当前CSS：

#marquee p {
  white-space: nowrap;
  animation-name: sidescroll;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function:  linear;
}

@keyframes sidescroll {
  0% { transform:translateX(125%); }
  100% { transform:translateX(-125%); }
}

这是角度模板：

    <div *ngIf="scorer.name.length > 12" class="element name" id="marquee"><p>{{scorer.name}}</div>
    <div *ngIf="scorer.name.length < 13" class="element name">{{scorer.name}}</div>
    <div class="element hints">{{scorer.hints}} hints</div>
    <div class="element lost">{{scorer.pointsLost}} lost</div>
    <div class="element svg" [innerHTML]="scorer.svg"></div>
    <div class="element score">{{scorer.score}}</div>

{{{scorer.name}
{{scorer.name}
{{scorer.hints}}hints
{{scorer.pointsLost}}输了
{{score.score}

诀窍在于，当使用百分比时，像

left

这样的属性与容器（最接近的父对象）大小相关，而

transform:translate

百分比与元素大小本身相关。您希望元素从位于父元素右侧的左侧滚动到位于父元素左侧的右侧，以便可以使用这些属性的组合

#marquee {
    position: relative;
    width: 200px;
    background: #eee;
    overflow: hidden;
}
#marquee::before {
    /* makes sure the height is correct as the position absolute p doesn't take any space */
    content: ' ';
    white-space: pre;
}

#marquee p {
    position: absolute;
    top: 0;
    margin: 0;
    white-space: nowrap;
    animation: sidescroll 10s linear infinite;
}

@keyframes sidescroll {
    0% {
        /* left side of the element */
        transform: translateX(0);
        /* on the right of the parent */
        left: 100%;
    }
    100% {
        /* right side of the element */
        transform: translateX(-100%);
        /* on the left of the parent */
        left: 0;
    }
}

---

注意：您忘了关闭p标签。

我会试一试，然后再报告。谢谢