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。

在overflow: hidden上设置的.marquee-keywords-pink无济于事，因为元素正以其完整宽度（例如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>

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

1 个答案: