移动端滚动跑马灯文字向左侧滚动到屏幕末端时截断问题求助

问题根因 #

• CSS中.marquee类的width属性缺少px单位，移动端浏览器对无单位的尺寸属性解析逻辑和桌面端不同，无法正确识别容器宽度，是截断的核心诱因
• 动画位移逻辑存在缺陷：当前设置的transform: translate(-100%, 0)仅能移动子元素自身宽度的距离，如果文字总宽度大于容器325px的宽度，移动结束后会有部分文字残留在容器内出现截断
• HTML结构不规范，缺少<body>标签包裹内容，移动端浏览器对不规范HTML的容错率低于桌面端，可能引发布局异常
• 自定义字体未配置加载降级规则，移动端字体加载较慢时，会先按 fallback 字体计算文字宽度，字体加载完成后文字变宽但动画位移参数未更新，也会导致截断

修正方案 #

可直接替换为以下调整后的代码：

CSS代码

@font-face {
    font-family: 'akira';
    src: url('./assets/142-webfont.woff2') format('woff2'),
         url('./assets/142-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* 先显示fallback字体，加载完成后替换，避免宽度计算偏差 */
}

body {
    height: 20vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0; /* 清除默认边距，避免布局偏移 */
  }
  
  .marquee {
    width: 325px; /* 补充px单位 */
    background: transparent;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
  }
  
  .marquee div {
    font-size: 12px;
    font-family: 'akira', sans-serif; /* 配置fallback字体，避免自定义字体加载失败时布局错乱 */
    padding-left: 100%;
    display: inline-block;
    animation: animate 20s linear infinite;
  }
  
  @keyframes animate {
    100% {
      transform: translateX(calc(-100% - 325px)); /* 位移距离设为子元素自身宽度+容器宽度，保证文字完全移出容器左侧 */
    }
  }

HTML代码

<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
    </head>
    <body> <!-- 补全body标签 -->
        <div class="marquee">
            <div>As of current, Ytems®, is a non-profit organization.
                 We sell our products at a breakeven profit. 
                 Enjoy designer apparel for minimum costs. </div>
          </div>      
    </body>
</html>

补充说明 #

如果后续需要调整容器宽度，只需要同步修改.marquee的width属性值和动画中calc里的325px为对应数值即可。

内容的提问来源于stack exchange，提问作者Anthon Wansland