Dynamic width for dynamic text - html

Question

I have a div, 'marqueeContainer', that is acting as a scrolling marquee. In this div I have another div with the id of 'marquee'. In THIS div, I have three divs, LineA, LineB and LineC. The contents of these lines will be dynamic, loaded in from a database.
I am currently using CSS animation to scroll the 'marquee' from right to left, with it's parent 'marqueeContainer' having a fixed width, and the overflow set to hidden.
The problem that I'm running into is that when the amount of text in each LINE div is quite lengthy, the text will overlap.
INCLUDED JFIDDLE
How do I modify the CSS so that each line stays a single line, each div stays inline with the rest and does NOT overlap, and the animation is a seamless loop, no matter the length of the text inside each 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

add width: 100%; in place of width:33.33%; to #marquee.loaded span.line
add height: 100%; in place of height:30px; to #marquee
add height:30px; in place of height: 30px; to #marqueeContainer
edit: not the best solution since the marquee does not execute a perfect loop due to the text elements no longer being inline.

Answer 2

So after doing some research, I found a potential solution:
If you are okay with using jQuery in your project, there is a jQuery plugin you can use that might help:
<script type='text/javascript' src='//cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js'></script>
I sketched out an example of something similar to what you are looking for:
Codepen Example
HTML:
<div class="marquee">
<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>
CSS:
.marquee {
width: 570px;
overflow: hidden;
}
.marquee span.line{
padding-top: 6px;
color: rgba(0,0,0, 0.6);
font-size: 9pt;
}
JS:
$('.marquee').marquee({
//speed in milliseconds of the marquee
duration: 15000,
//gap in pixels between the tickers
gap: 50,
//time in milliseconds before the marquee will start animating
delayBeforeStart: 0,
//'left' or 'right'
direction: 'left',
//true or false - should the marquee be duplicated to show an effect of continues flow
duplicated: true
});
reference: http://aamirafridi.com/jquery/jquery-marquee-plugin

Answer 3

rather than add more external code into something I wish to keep as lightweight as possible. I have decided to keep this in the HTML and CSS. The problem I was having was BOTH in the CSS and HTML, not just the CSS. Rather than have three (3) spans, I consolidated everything into one (1) span, but repeated the content three times to ensure everything would stay on one line.
The #marquee's width is set to auto. where the span.line's width is set to 100%. No white-space: nowrap needed.
And so far, I have an ever expandable marquee that loops quite seamlessly by using only HTML and 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 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 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%; }
}