How can I get my text to scroll left and right only when its container is too small?

So rather than code dumping, I'll just link a reference to the types I've seen so far. https://www.html.am/html-codes/marquees/html-marquee.cfm

While these are fairly close to what I want, they're just not quite right. The closest one to what I'm after is the bouncing text... But these are all made based on a container that's bigger than the text.

How can I get my text to scroll left and right only when I have text overflow? (https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow)

I thought all this would be possible in css. But if not JS would be fine.

div[type=text] {
  border: solid 1px black;
  height: 20px;
  width: 100px;
  font-family: sans-serif;
  overflow: hidden;
}

<div type="text">abcdefghijklmnopqrstuvwxyz</div>

Solution 1:

Solving the Design Issue

Deliberately designing your content to not fit within view might actually be the fundamental issue to solve here. Maybe it is better for users to show the content visibly without any need to scroll, animate, or script it.

There are many reasons not to animate stuff on your web page from problems you cause for groups of your users, to the pure distraction of moving things.

So, my main answer is you probably ought to design a different solution (such as, giving content enough space).

You'll find almost universally that the marquee tag is to be avoided (and that doesn't mean using a different tag and then animating it with CSS or JavaScript). However, we can still have some fun theoretically, just avoid in real life as it is deprecated.

Fun With Marquee

You can use alternate, with some additional non-breaking spaces to show the content in a visual feast of sliding text. I don't think this is good for your users, but marvel in the potential to have lots of moving things.

div[type=text] {
  border: solid 1px black;
  height: 20px;
  width: 100px;
  font-family: sans-serif;
  overflow: hidden;
}

<div type="text"><marquee behavior="alternate">&nbsp;&nbsp;&nbsp;&nbsp;abcdefghijklmnopqrstuvwxyz&nbsp;&nbsp;&nbsp;&nbsp;</marquee></div>