Feature Request: Scroll long titles instead of truncating

[Noor-Khaldi]

Long song titles get cut off with an ellipsis on small/fixed-width dashboards (wall tablets in my case) — see screenshot, "Ludwig van Beethoven - Symphony No…".

Would love an option like options.scroll_long_titles: true that marquees the title when it overflows, and only when it overflows. Same for the artist line would be a bonus.

card_mod works as a workaround but breaks whenever the Emotion class names shift. A built-in option would be much more durable.

Thanks for the great card!

[antontanderup]

What's the css you're using with cardmod for this?

[Noor-Khaldi]

Quick note: I worked through this with an AI assistant — I don't really understand the CSS but it's working on my dashboard. Sharing in case it's useful for thinking about a native implementation.

What we ended up doing with card_mod:

1. The title column was sized to its truncated content (~124 px), leaving lots of empty space next to it. We expanded it to fill the row.
2. We hide the original <h3> text and draw the title in a ::before pseudo-element on top, so we can animate it without breaking the card's grid layout.
3. We use transform: translateX for the animation (GPU-composited → smooth at any speed; text-indent was visibly stair-stepping).
4. We use min(0px, calc(100cqi - 100%)) so CSS itself decides whether to scroll. If the text fits, the scroll distance is 0 (no animation); if it overflows, it scrolls by exactly the overflow amount. No threshold needed → adapts to any card size.
   The snippet (replace media_player.<your_player>):

card_mod:
  style: |
    {% set t = state_attr('media_player.<your_player>', 'media_title') %}
    {% set tlen = (t | length) if t else 0 %}
    div:has(> h3) {
      flex: 1 1 auto !important;
      grid-template-columns: minmax(0, 1fr) !important;
      min-width: 0 !important;
    }
    h3 {
      position: relative;
      overflow: hidden;
      text-overflow: clip !important;
      text-indent: -10000px;
      container-type: inline-size;
    }
    h3::before {
      content: "{{ t }}";
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      white-space: nowrap;
      text-indent: 0;
      animation: mmpc-marquee {{ ((tlen / 6) + 5) | int }}s linear infinite;
      will-change: transform;
    }
    @keyframes mmpc-marquee {
      0%, 10%   { transform: translateX(0); }
      80%, 100% { transform: translateX(min(0px, calc(100cqi - 100%))); }
    }

Caveats (that a built-in option could clean up):

• Selects elements by class names that may change between card releases.
• Only tested on the standard mediocre-media-player-card.
• Pattern based on chriskirknielsen.com/blog/scrolling-overflow-cells-with-css-container-query and ryanmulligan.dev/blog/css-marquee.

Thanks for the great card!

[antontanderup]

That's super useful. Thanks. Seems like a good idea. I don't think this should be an option if this is added. It should just be the default i think.