Need help with picture Elements card CSS style


I would be happy if anybody could help me with CSS. i have no knowledge about it and reading the docs doesn´t help me much.

Here is my setup:
I created with NodeRed and RssFeed an entity which tells me what is currently running on a TVchannel(want to do it with my popular TVchannels). I created an picture elemnts card, because i wanted also to have a button to press, so that the TV changes to that channel (the button will be the TVchannel logo image, but i didn’t implemented it yet). In the following you will see, what i mean.

No the problem:
When the name of the show is too long, it get cut like in the following example.

I understand that i set with left: and top: the center of the element, but i would like it so that it writes from right to left, if you know what i mean. And is it possible, that when the name is really too long for the whole card, that the text ends with an “…” or that it adds a second row but with logical seperation?

Thanks to anybody who can help me.

Try this

    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;

Thanks, but it doesn’t seem to change anything. Did i do something wrong? I also treid it without the “;” at the end.

You probably need card-mod (which was why I had ; at the end of each).

I tried it, but it dowsn’t seem to work at all. I found this thread and it seems that card-mod doen’t work with elements within picture elements card:

You might have to consider a different approach then. Maybe the custom-button card. You can make that look like anything.

Thanks for the hint, but it seems that the whole card will become a button. I will loook/wait for an other solution, but thank you

If you put those button/cards in an entities card you will end up with the same as you have shown above.

This is one of mine:

Screenshot_2020-11-10 Overview - Home Assistant

All you have to do is only stack one per row and layout the button with your image and sensor text, which you have already done (the hard bit IMO).

Took a couple of seconds to change it to this:

Screenshot_2020-11-10 Administration - Home Assistant

Still needs some work to get the sensor state to show next to the image.

oh wow, thanks. Could you paste me your config here? That would be really great

This template goes at the top of your raw edit mode in lovelace:

    aspect_ratio: 6/1
      action: none
    layout: icon-state
    show_entity_picture: true
    show_icon: false
    show_label: false
    show_name: false
    show_state: true
        - border-radius: 10px
        - border: solid 1px var(--primary-color)
        - box-shadow: none
        - padding: 6px 6px
        - margin: 0px 0px
        - '--ha-card-background': 'rgba(0, 0, 0, 0)'
        - width: 100%
        - height: 100%
        - object-fit: contain
      action: call-service

This is the card config:

type: entities
title: TV Channels
show_header_toggle: false
  - entity: sensor.your_sensor_here
    entity_picture: /local/tv_logos/abc.png
      service: script.lounge_tv_ch_abc
    template: picture_button
    type: 'custom:button-card'
  - entity: sensor.your_sensor_here
    entity_picture: /local/tv_logos/sbs.png
      service: script.lounge_tv_ch_sbs
    template: picture_button
    type: 'custom:button-card'
  - entity: sensor.your_sensor_here
    entity_picture: /local/tv_logos/sbs-vice.png
      service: script.lounge_tv_ch_sbs_vice
    template: picture_button
    type: 'custom:button-card'
  - entity: sensor.your_sensor_here
    entity_picture: /local/tv_logos/southern-cross-television.png
      service: script.lounge_tv_ch_sthnx
    template: picture_button
    type: 'custom:button-card'

Hi tom_I - do you have a public github repository with your setup available?

I see so many of your posts with great ideas and id love to see the code if possible

No I don’t, sorry.

Outdated info.
Ref this:

Also, you may try using template-entity-row, it may be looking like this:

type: vertical-stack
  - type: markdown
    content: |
    style: 'ha-card { color: red; }'
  - type: entities
      - type: custom:template-entity-row
        name: ESPN
        image: >-
          style: |
            state-badge {
              background-size: 100%;
              background-repeat: no-repeat;
              background-position-y: center;
              border-radius: 0%;
            .info {
              text-align: right;


Here the channel’s name is inside the name property - but you may use it inside a state too (show state & hide name in the row).
Values of the entity_picture & friendly_name (or state) may be set inside a corresponding template sensor.

Same may be achieved with a conventional entity-row with a bit more card-mod.