去除选框上的白色间隙

Question

字幕上有一个白色间隙。

我写了一个很长的句子（突发新闻突发新闻突发新闻突发新闻突发新闻突发新闻突发新闻突发新闻）但它继续下去然后B触及边缘

B最新新闻 最新新闻 最新新闻 最新新闻...

在一切都完成之前它不会从另一端出来

s

^上面这句话几乎要从另一端出来^

我已经在谷歌上进行了搜索（我什至在谷歌上发现了一个黑客（搜索“marquee html”））

<marquee>here is the text I repeat it over and over again it keeps going and going but the beginning wouldn't come out until I touch it</marquee>

Answer 1

您可能不应该使用

<marquee>

标签，因为它已被弃用，或者已经过时，https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee

也许尝试使用 javascript/jquery 解决方案。有很多这样的插件

编辑

我发现这个 jQuery Marquee 插件有一个像您正在寻找的那样没有间隙的选项。这是一个例子

$('.marquee').marquee({
  direction: 'left'
});

.marquee {
  width: 300px;
  overflow: hidden;
  border: 1px solid #ccc;
  background: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type='text/javascript' src='//cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js'></script>

<div class="marquee" data-duplicated='true' data-direction='left'>jQuery marquee is the best marquee plugin in the world</div>

2023 编辑

可以使用CSS动画：

.marquee {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  border: 1px solid #333;
}

.marquee p {
  padding-left: 50%;
  color: red;
  animation: marquee 7s linear infinite;
}

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

<div class="marquee">
  <p>Enjoy this CSS marquee! 2023!</p>
</div>