滚动屏幕宽度的 CSS 文本答案

【问题标题】：CSS text that scrolls the width of the screen滚动屏幕宽度的 CSS 文本
【发布时间】：2020-06-15 22:22:58
【问题描述】：

我正在尝试使用 html 和 css 在屏幕上水平滚动一些文本，类似于新闻自动收报机。我发现另一个帖子试图达到同样的目的：Pure CSS Continuous Horizontal Text Scroll Without Break

但是如果文本的宽度大于窗口的宽度，则解决方案有效，水平滚动条会出现在 chrome 的屏幕底部。

我想让文本滚动用户屏幕的整个宽度并隐藏溢出。

我正在使用以下 css：

p{
  line-height: 0.85;
  font-size: 7.9vw;
}

.marquee {
  width: 100wv;
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
}

.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 20s linear infinite;
}

.marquee2 span {
  animation-delay: 10s;
}

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}

html:

<html>
  <head>
    <title>foo</title>
    <link rel="stylesheet" href="./styles.css" type="text/css">
  </head>
  <body>
      <p class="marquee">
        <span>This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text -&nbsp;</span>
      </p>
      <p class="marquee marquee2">
        <span>This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text -&nbsp;</span>
      </p>
  </body>
</html>

我尝试将选取框元素放在占据用户屏幕宽度的容器 div 中并设置 overflow-x: hidden;但是这不起作用。

仅使用 css/html 可以实现我想做的事情吗？

谢谢！

【问题讨论】：

标签： html css

【解决方案1】：

我已经找到了解决方案。添加

溢出-x：隐藏；到 body 元素解决了这个问题。

【讨论】：