文字很多的横向滚动处理

思路如下：文字很多的话 ，计算下要显示的文字的长度，根据文字长度来计算滚动时间和滚动偏移的位置

 mounted 中设置：

//计算滚动文字的长度
const animateTextlength = this.meeting.importantInfo.toString().replace('<span style="color:red;">', '').replace('</span>', '').trim().length;
//因为文字的大小是 18px, 所以这里是文字的数量 * 18, + 200 是为了多给点长度 
const animateTextWidth = '-' + (animateTextlength * 20 + 200) + 'px';
document.body.style.setProperty('--animateTextlength', animateTextWidth);

//如果文字数量大于80个字，那么就延长滚动时间,基础滚动时间为23秒，超出每5个字增加一秒
if (animateTextlength > 80) {
  const animateTime = 23 + Math.ceil((animateTextlength - 80)/5) + 's';
  document.body.style.setProperty('--animateTime', animateTime);
}

css 设置

.animate {
        max-width: 100%;
        line-height: 30px;
        display: inline-block;
        white-space: nowrap;
        animation: var(--animateTime, 23s) wordsLoop linear infinite normal;
      }

      @keyframes wordsLoop {
        0% {
          transform: translateX(200px);
          -webkit-transform: translateX(200px);
        }
        100% {
          transform: translateX(var(--animateTextlength, -100%));
          -webkit-transform: translateX(var(--animateTextlength, -100%));
        }
      }

      @-webkit-keyframes wordsLoop {
        0% {
          transform: translateX(200px);
          -webkit-transform: translateX(200px);
        }
        100% {
          transform: translateX(var(--animateTextlength, -100%));
          -webkit-transform: translateX(var(--animateTextlength, -100%));
        }
      }

HTML

<div class="animate" v-html="meeting.importantInfo"></div>