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:

term1
term2
term3

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

term1 term2 term2

Is this possible with the marquee tag?

Contents hide

Answers:

Method 1

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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
    </marquee>
</div>

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

EDIT

Added background-color to the marquee tag

EDIT-2

Added a text right before the marqee

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating