Markiza CSS o zmiennej długości wiadomości

Question

Szukam alternatyw dla znaczników marki i znalazłem sposób, aby to zrobić poprzez css. Jednak wiadomości, których używam, mają różne długości, więc istnieje alternatywa do umieszczenia atrybutu "45" na 100%, więc bez względu na to, jak długi i krótki jest komunikat, komunikat pokaże całą wiadomość i pętlę ponownie po wyświetleniu komunikatu?

.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

chcesz coś takiego?

.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

Użyj jQuery.Marquee wtyczki (licencja: ISC). Jeśli nie chcesz korzystać z wtyczki, można użyć kodu następujący fragment z wtyczki do obliczania opóźnienia

// 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; 

Z o.duration inicjowane z 5000 czyli 5 sekund.