如何让我的垂直 css 选取框重复

Question

我正在尝试制作一个没有任何 whitespace/gaps 的垂直选取框循环，但我似乎无法使其重复。我添加了 aria-hidden="true"，它适用于我的水平选框，但这次似乎没有解决问题。

这里是带跑马灯的码笔：https://codepen.io/theomarusman/pen/oNbBgej

this is the white space i want to remove

编辑：row 和 col 标签没用我正在使用另一个选取框的代码来制作这个，然后我在一行和 col

中使用了它

Answer 1

/* Please try this instead */

body {
 background-color: black;
}

.side-bar {
 top: 0;
 left: 0;
 height: 100%;
 color: white;
 writing-mode: vertical-rl;
 text-orientation: sideways-right;
}

.marquee p {
 overflow: hidden;
 white-space: nowrap;
 height: 100%;
}

.marquee span {
 animation: marquee 8s linear infinite;
 display: inline-flex;
 padding-right: 10px;
 font-size: 4rem;
}

@keyframes marquee {
 from {
  transform: translateY(-100%);
 }

 to {
  transform: translateY(0);
 }
}

    <div class="position-fixed side-bar">
      <div class="row marquee">
        <div class="col-12 bg-white">
          <p class="m-0 p-0 p-3">
            <span class="m-0 p-0 pb-4" aria-hidden="true">USE CODE "MLT"</span>
            <span class="m-0 p-0 pb-4" aria-hidden="true">USE CODE "MLT"</span>
            <span class="m-0 p-0" aria-hidden="true">USE CODE "MLT"</span>
          </p>
        </div>
      </div>
    </div>

.marquee {
  overflow: hidden;
  white-space: nowrap;
}

@keyframes marquee {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}

此代码更改为以下内容。

.marquee p{
  overflow: hidden;
  white-space: nowrap;
  height:100%;
}

@keyframes marquee {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

已在 codepen 中解决

https://codepen.io/Rayeesac/pen/OJMWMpm

更多例子是

Horizontal marquee without white space and JS

Vertical marquee without white space and JS

如何让我的垂直 css 选取框重复

How can I make my vertical css marquee repeat

html

css

marquee