Question

我有一个div，＆＃39; marqueeContainer＆＃39; ，它充当滚动字幕。在这个div中，我有另一个id为＆＃39; marquee＆＃39; 的div。在这个div中，我有三个div， LineA ， LineB 和 LineC 。这些行的内容将是动态的，从数据库加载。

我目前正在使用CSS动画从右到左滚动＆＃39;＆＃39; ，并使用它的父＆＃39; marqueeContainer＆＃39; 具有固定宽度，溢出设置为隐藏。

我遇到的问题是，当每个 LINE div中的文字数量非常长时，文字会重叠。

INCLUDED JFIDDLE

如何修改CSS以使每行保持单行，每个div与其余行保持内联并且不重叠，并且动画是无缝循环，无论每个内的文本长度如何LINE div？

HTML：

<div id="marqueeContainer">
    <div id="marquee" class="loaded">
        <span class="line" id="lineA"><span class="title">The Singer's Musical Theatre Anthology: Mezzo-Soprano/Belter, Volume 1 Book/Audio</span> - <span class="artist">Happy to Keep His Dinner Warm from "How to Succeed in Business without Really Trying" (accompaniment)</span> | <span class="album">Ruben Piirainen, piano</span></span>
        <span class="line" id="lineB"><span class="title">The Singer's Musical Theatre Anthology: Mezzo-Soprano/Belter, Volume 1 Book/Audio</span> - <span class="artist">Happy to Keep His Dinner Warm from "How to Succeed in Business without Really Trying" (accompaniment)</span> | <span class="album">Ruben Piirainen, piano</span></span>
        <span class="line" id="lineC"><span class="title">The Singer's Musical Theatre Anthology: Mezzo-Soprano/Belter, Volume 1 Book/Audio</span> - <span class="artist">Happy to Keep His Dinner Warm from "How to Succeed in Business without Really Trying" (accompaniment)</span> | <span class="album">Ruben Piirainen, piano</span></span>
    </div>
</div>

CSS：

body{
    font-family: Arial, sans-serif;
}

#marqueeContainer{
    width: 570px;
    height: 30px;
    position: relative;
    overflow: hidden;
    padding: 0;
    margin: 0;
    top: 20px;
    left: 47px;
    pointer-events: none;
}

#marquee{
    visibility:visible;
    display: block;
    position: absolute;
    overflow: hidden; 
    width: 300%;
    height: 30px;
    pointer-events: none;
}

#marquee > span{
    pointer-events: none;
}

#marquee.loaded{
    -webkit-animation: marquee 10s linear infinite;
    -moz-animation: marquee 10s linear infinite;
    -ms-animation: marquee 10s linear infinite;
    -o-animation: marquee 10s linear infinite;
    animation: marquee 10s linear infinite;
    pointer-events: none;
}

#marquee span.line{
    display: none;
}

#marquee.loaded span.line{
    display: inline-block;
    float: left;
    width: 33.333%;
    padding-top: 6px;
    color: rgba(0,0,0, 0.6);
    font-size: 9pt;
    white-space: nowrap;
}


@-webkit-keyframes marquee {
    0% { left: -50%; }
    100% { left: -150%; }
}
@-moz-keyframes marquee {
    0% { left: -50%; }
    100% { left: -150%; }
}
@-ms-keyframes marquee {
    0% { left: -50%; }
    100% { left: -150%; }
}
@-o-keyframes marquee {
    0% { left: -50%; }
    100% { left: -150%; }
}
@keyframes marquee {
    0% { left: -50%; }
    100% { left: -150%; }
}

Answer 1

而不是将更多外部代码添加到我希望保持尽可能轻量级的内容中。我决定将其保留在 HTML 和 CSS 中。我遇到的问题是 CSS 和 HTML 中的 BOTH ，而不仅仅是 CSS 。我没有将三个（3）跨度整合到一个（1）范围内，而是将内容重复三次，以确保所有内容都保留在一行上。

#marquee 的宽度设置为自动。其中 span.line 的宽度设置为100％。没有白色空间：nowrap需要。

到目前为止，我有一个可扩展的选框，通过仅使用 HTML 和 CSS

非常无缝地循环

HERE'S MY FIDDLE

<强> HTML：

<div id="marqueeContainer">
    <div id="marquee" class="loaded">
        <span class="line">The Singer's Musical Theatre Anthology: Mezzo-Soprano/Belter, Volume 1 Book/Audio - Diamonds Are a Girl's Best Friend from "Gentlemen Prefer Blondes" (accompaniment) | Ruben Piirainen, piano&nbsp;&nbsp;&nbsp;The Singer's Musical Theatre Anthology: Mezzo-Soprano/Belter, Volume 1 Book/Audio - Diamonds Are a Girl's Best Friend from "Gentlemen Prefer Blondes" (accompaniment) | Ruben Piirainen, piano&nbsp;&nbsp;&nbsp;The Singer's Musical Theatre Anthology: Mezzo-Soprano/Belter, Volume 1 Book/Audio - Diamonds Are a Girl's Best Friend from "Gentlemen Prefer Blondes" (accompaniment) | Ruben Piirainen, piano   </span>
    </div>
</div>

<强> CSS：

body{
    font-family: Arial, sans-serif;
}

#marqueeContainer{
    width: 570px;
    height: 25px;
    position: relative;
    overflow: hidden;
    padding: 0;
    margin: 0;
    top: 20px;
    left: 47px;
}

#marquee{
    visibility:visible;
    display: block;
    position: absolute;
    overflow: hidden; 
    width: auto;
    height: 100%;
    top: 0;
    left: 0;
}

#marquee.loaded span.line{
    -webkit-animation: marquee 10s linear infinite;
    -moz-animation: marquee 10s linear infinite;
    -ms-animation: marquee 10s linear infinite;
    -o-animation: marquee 10s linear infinite;
    animation: marquee 10s linear infinite;
}

#marquee.loaded span.line{
    display: block;
    width: auto;
    padding-top: 6px;
    color: rgba(0,0,0, 0.6);
    font-size: 9pt;
    white-space: nowrap;
    position: relative;
    top: 0;
}


@-webkit-keyframes marquee {
    0% { left: -17%; }
    100% { left: -50.4%; }
}
@-moz-keyframes marquee {
    0% { left: -17%; }
    100% { left: -50.4%; }
}
@-ms-keyframes marquee {
    0% { left: -17%; }
    100% { left: -50.4%; }
}
@-o-keyframes marquee {
    0% { left: -17%; }
    100% { left: -50.4%; }
}
@keyframes marquee {
    0% { left: -17%; }
    100% { left: -50.4%; }
}

动态文字的动态宽度

1 个答案: