CSS template for variable message lengths

Question

I searched for alternatives to marquee tags and found how to do this via css. However, the messages I use are variable in length, so there is an alternative to adding the “45s” attribute, possibly 100%, so no matter how long or short this message is, the message will show the whole message and cycle again as soon as the message will be displayed?

.marquee { margin: 0 auto; white-space: nowrap; overflow: hidden; position: absolute; color: #ffffff; background-color: #000000; font-family: Arial Rounded MT Bold; } .marquee span { display: inline-block; padding-left: 100%; /* show the marquee just outside the paragraph */ animation: marquee 45s linear infinite; } @keyframes marquee { from { text-indent: 0%} to { text-indent: -150% } } 

 <p id="PassengerNews_Scrollbar" class="microsoft marquee" style="height: 95%; width: 90%;left: 5%;top: 2%;font-size: 7%;"> <span>|*NewsData*|</span> </p> 

Answer 1

do you need something like that?

 .marquee { margin: 0 auto; white-space: nowrap; overflow: hidden; position: absolute; color: #ffffff; background-color: #000000; font-family: Arial Rounded MT Bold; height: 90%; width: 90%; left: 5%; top: 5%; font-size: 7%; } .marquee .line__wrap { display: block; position: absolute; width: auto; left: 0; animation: marquee__wrap 2s linear infinite; font-size: 18px; } .marquee .line { position: relative; margin-left: -100%; animation: marquee 2s linear infinite; } @keyframes marquee__wrap { from { margin-left: 100%; } to { margin-left: 0%; } } @keyframes marquee { from { left: 100%; } to { left: 0%; } } 

 <p id="PassengerNews_Scrollbar" class="microsoft marquee"> <span class="line__wrap"> <span class="line">|*NewsData*|</span> </span> <span class="line__wrap" style="top: 30px;"> <span class="line">|*NewsData*|long long long long massage</span> </span> </p> 

Answer 2

Use the jQuery.Marquee plugin (license: ISC ). If you do not want to use the plugin, you can use the following code snippet from the plugin to calculate the delay

 // formula is to: (Width of the text node + width of the main container / Width of the main container) * speed; o.duration = ((parseInt(elWidth, 10) + parseInt(containerWidth, 10)) / parseInt(containerWidth, 10)) * o.duration; 

With o.duration initialized to 5000 , a value of 5 seconds.