CSS Marquee 超出了较小设备上的屏幕尺寸

Question

有一个不寻常的问题，我的 css 制作的选框超出了较小设备的大小，因此通过扩展屏幕通过了包含 div 元素的大小。

我附上了一张图片以供参考，我检查了所有移动设备，似乎存在问题。用户可以通过屏幕大小向右滑动。

显示由选取框造成的问题的图片 - https://i.ibb.co/7rkwJXJ/image.png

基本上垂直指南的右侧通过了包含 div 大小，除了向左移动的选框文字外，只有白色。

.marquee {
    display: flex;
    justify-content: center;
    margin: 0 0 40px 0;
}

.marquee-keywords-pink {
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    position: absolute;
    z-index: 1;
    font-weight: bold;
}

.marquee-keywords-pink span {
    display: inline-block;
    padding-left: 100%;
    animation: marquee-keywords 30s linear infinite;
    color: #faa2b0 !important;
    text-transform: uppercase;
    font-size: 20px;
    letter-spacing: 0.2em;
    font-family: var(--heading-font-family);
    animation-delay: -14s;
}

.marquee-keywords-two span {
    animation-delay: 1s;
}

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

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

<div class="marquee">
<p class="marquee-keywords-pink">
<span>#Example Example #Example Example #Example Example #Example Example #Example Example </span>
</p>
<p class="marquee-keywords-pink marquee-keywords-two">
<span>#Example Example #Example Example #Example Example #Example Example #Example Example </span>
</p>
</div>

Answer 1

您必须将position: relative 和overflow: hidden 添加到.marquee 元素。如果使用绝对位置到.marquee-keywords-pink，则必须将高度设置为 40px 到 .marquee。

设置在.marquee-keywords-pink 上的overflow: hidden 没有做任何事情，因为元素以其全宽（例如1400 像素）扩展。如果你有一个宽度更大的内部元素，那么它会切割它。

.marquee {
  position: relative;
  overflow: hidden;
  height: 40px;
  display: flex;
  justify-content: center;
  margin: 0 0 40px 0;
}

.marquee-keywords-pink {
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    position: absolute;
    z-index: 1;
    font-weight: bold;
}

.marquee-keywords-pink span {
    display: inline-block;
    padding-left: 100%;
    animation: marquee-keywords 30s linear infinite;
    color: #faa2b0 !important;
    text-transform: uppercase;
    font-size: 20px;
    letter-spacing: 0.2em;
    font-family: var(--heading-font-family);
    animation-delay: -14s;
}

.marquee-keywords-two span {
  animation-delay: 1s;
}

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

<div class="marquee">
  <p class="marquee-keywords-pink">
    <span>#Example Example #Example Example #Example Example #Example Example #Example Example </span>
  </p>
  <p class="marquee-keywords-pink marquee-keywords-two">
    <span>#Example Example #Example Example #Example Example #Example Example #Example Example </span>
  </p>
</div>