我的页面上有很多选框,每行都在单独的行中,并且具有不同的文本长度
<marquee class="mq">this finishes first</marquee>
<marquee class="mq">this finishes last because it has a veryyyyyyyyyyyyyyy longggggggggggggggggggggggggggggggggg text in it</marquee>
<marquee class="mq">this finishes secondly after 1st one</marquee>
[由于字幕太短而无法完成字幕滚动时,它会在完成后立即重新运行。但我的要求是让它等待其他字幕完成并同时开始下一个循环我该如何实施?
.mq {
width: 600px;
border: solid 1px black;
display: block;
margin: 0 auto;
}
<marquee class="mq">this finishes first</marquee>
<marquee class="mq">this finishes last because it has a veryyyyyyyyyyyyyyy longggggggggggggggggggggggggggggggggg text in it</marquee>
<marquee class="mq">this finishes secondly after 1st one</marquee>
我自己通过使用css动画而不是使用选取框找到了自己的解决方案
<div class="container">
<div class="marquee">text 1</div>
</div>
<div class="container">
<div class="marquee">text 2</div>
</div>
<div class="container">
<div class="marquee">text 3</div>
</div>
.marquee {
width: fit-content;
}
首先,类选取框设置div的宽度为fit-content以获得每个div的实际宽度
然后运行循环以查找所有选取框的最大宽度(最大宽度)
然后将所有选取框div设置为带内嵌样式的width属性为所有选取框的最大值
现在每个div.marquee具有相同的宽度,即maxwidth(当前宽度为内联样式,覆盖marquee类中的当前宽度样式)
所有div.marquee都将在具有固定宽度的自己的容器中运行