How to display multiple moving text in one line instead of multiple lines by marquee tag?

{% for term in terms %}
    <marquee behavior="scroll" direction="right" scrollamount="1" > {{ term }}</marquee>
{% endfor %}

For example, if terms is:

terms = ['term1', 'term2', 'term3']

They are currently displayed vertically and moving to the right:


But I hope them to be displayed at one line when moving:

term1 term2 term2

Is this possible with the marquee tag?

>Solution :

Just try

.marquee-wrapper {
  display: flex;

marquee {
  flex: 1;
<div class="marquee-wrapper">
    <span>Recent Items: </span>
    <marquee style="background-color: yellow;" behavior="scroll" direction="right" scrollamount="1">
        <!-- {% for term in terms %}
            {{ term }}
        {% endfor %} -->
        Text to move

Which will put all the texts in a single marquee, and it will be moving one after another.


Added background-color to the marquee tag


Added a text right before the marqee

Leave a Reply