Text Component should handle overflow strategies

[marchant]

• ellipsis is one of them, standard, see https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-overflow

• but we should also offer an animated version that moves though the text, like a ticker symbol out the OG marquee tag:

• Rough CSS, use text-overflow + CSS animations, then decide when to trigger it:

 .marquee-container {
  overflow: hidden; /* Hide overflowing text */
  white-space: nowrap; /* Keep text on one line */
  width: 100%; /* Or set a specific width */
}

.marquee-content {
  display: inline-block;
  padding-left: 100%; /* Start outside the right edge */
  animation: marquee 10s linear infinite; /* Adjust speed */
}

@keyframes marquee {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
}

trigger on hover:
.marquee-container:hover .marquee-content {
  animation: marquee 10s linear infinite;
}

But on touch input we might want to use long press?

• Pointers
• A basic ticker tape (marquee text) with just CSS
• Creating A Marquee Effect With CSS Animations

[marchant]

seehttps://www.bennadel.com/blog/3624-reconsidering-text-overflow-ellipsis-as-a-design-smell-and-accessibility-concern.htm

• HTML text-overflow ellipsis detection
• MacOS Finder-like "center aligns" ellipsis
• The Ballad of Text Overflow