0

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>
Meeky333
  • 75
  • 6

1 Answers1

3

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>
Fenton
  • 241,084
  • 71
  • 387
  • 401
  • 1
    Just to chime in that causing text to be animated in this way may limit your audience. People with certain impairments find moving text disabling; be sure to use appropriate CSS to account for these people (e.g., the [`prefers-reduced-motion`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) media feature) if you decide to go ahead with the implementation. – Heretic Monkey Jan 21 '22 at 13:27
  • 1
    Thank you for the responses. You've convinced me not to use it. I can't believe it was so simple in the end... Not sure how I will work around the issue yet. but I will. I would much rather use a modern implementation over a deprecated hack. – Meeky333 Jan 21 '22 at 14:30