<div class="marquee">
  <span>Lorem ipsum dolor sit amet elit. Animi, aliquid.<span>
</div>
<div class="marquee">
  <span>这是一段可以自动滚动的文本</span>
</div>
<div class="marquee">
  <span>较少的文本</span>
</div>
<div class="marquee">
  <span>这是一段可以自动滚动的文本，滚动速度会随着文本的最终尺寸变化而变化</span>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  width: 100vw;
  height: 100vh;
  font-size: 1.6rem;
  padding: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  place-content: center;
}
.marquee {
  display: flex;
  flex: 1;
  min-width: 0;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  /*   width: 250px;
  padding: 2px 4px; */
  background-color: salmon;
  /*   resize: horizontal; */
  container-type: inline-size;

  animation: appear 0.1s;
}
.marquee:nth-child(1) {
  flex: 1.5;
}
.marquee:nth-child(3) {
  flex: 0.5;
}
.marquee:nth-child(4) {
  flex: 2;
}
.marquee[data-mul="true"] > * {
  animation: move calc(var(--speed) * 3s) linear infinite both alternate;
}

@keyframes appear {
  to {
    opacity: 1;
  }
}

@keyframes move {
  to {
    transform: translateX(min(100cqw - 100%, 0px));
  }
}

document.addEventListener("animationstart", (ev) => {
  if (ev.animationName == "appear") {
    console.log(ev.target.children[0]);
    ev.target.dataset.mul = ev.target.scrollWidth > ev.target.offsetWidth;
    ev.target.style.setProperty(
      "--speed",
      ev.target.scrollWidth / ev.target.offsetWidth
    );
  }
});