有一个不寻常的问题,我的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>
答案 0 :(得分: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>