html - 动态文本的动态宽度

Question

我有一个 div，'marqueeContainer'，它充当滚动选取框。在这个 div 中，我有另一个 ID 为 'marquee' 的 div。在这个 div 中，我有三个 div，LineA、LineB 和 LineC。这些行的内容将是动态的，从数据库加载。

我目前正在使用 CSS 动画从右向左滚动 'marquee'，它的父级 'marqueeContainer' 具有固定宽度，溢出设置为隐藏。

我遇到的问题是，当每个 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

添加 width: 100%; 代替 width:33.33%; 到 #marquee.loaded span.line

添加 height: 100%; 代替 height:30px; 到 #marquee

添加 height:30px; 代替 height: 30px; 到 #marqueeContainer

编辑:这不是最佳解决方案，因为由于文本元素不再内联，选取框无法执行完美循环。