Multi-line entity names

Configuration Frontend
1

I’m trying to make my Lovelace UI more compact, but I’m running into lots of name truncation. Here’s an example:

51%20PM
51%20PM830×790 30.2 KB

Rather than trying to find a shorter name that fits by trial-and-error, it would be great if it I could just strategically insert a newline to create a multi-line name. Is there a way to insert a “br” the equivalent without designing a new card? I do have custom_ui installed.

Hmm… Seems like no? https://github.com/home-assistant/ui-schema/issues/28

2

You might try entering \n or <br/> to break up names. I do not know if it would work though,

4 Likes
3

Unfortunately not. They both come through as text and aren’t interpreted. I suspect that there’s a way to do it by building my own custom card, but I’m trying to avoid that. In the meantime, I’ve improved it by limiting the number of columns by creating 3 vertical stacks and limiting the number of columns in the glance card (which I didn’t realize I could do). That’s helped space out the items and limits the truncation.

1 Like
4

Thanks for the <br/> tip Anon. I used this with custom card button card.

Those are the configuration fields which support templating:

  • name (Supports also HTML rendering): This needs to return a string

Here’s how mine looks:

59 PM
59 PM942×220 9 KB

26 PM
26 PM946×220 12.5 KB

cards:
  - color_type: icon
    entity: input_boolean.front_autolock_automation
    name: Front<br/>Lock
    state:
      - color: 'rgb(253,216,53)'
        value: 'on'
    styles:
      card:
        - height: 100px
      name:
        - text-overflow: unset
        - white-space: unset
        - word-break: break-word
    type: 'custom:button-card'
  - color_type: icon
    entity: input_boolean.front_lights_automation
    name: Front<br/>Lights
    state:
      - color: 'rgb(253,216,53)'
        value: 'on'
    styles:
      card:
        - height: 100px
      name:
        - text-overflow: unset
        - white-space: unset
        - word-break: break-word
    type: 'custom:button-card'
  - color_type: icon
    entity: input_boolean.porch_light_automation
    name: Porch<br/>Light
    state:
      - color: 'rgb(253,216,53)'
        value: 'on'
    styles:
      card:
        - height: 100px
      name:
        - text-overflow: unset
        - white-space: unset
        - word-break: break-word
    type: 'custom:button-card'
  - color_type: icon
    entity: input_boolean.garage_autolock_automation
    name: Garage<br/>Lock
    state:
      - color: 'rgb(253,216,53)'
        value: 'on'
    styles:
      card:
        - height: 100px
      name:
        - text-overflow: unset
        - white-space: unset
        - word-break: break-word
    type: 'custom:button-card'
  - color_type: icon
    entity: input_boolean.garage_light_automation
    name: Garage<br/>Light
    state:
      - color: 'rgb(253,216,53)'
        value: 'on'
    styles:
      card:
        - height: 100px
      name:
        - text-overflow: unset
        - white-space: unset
        - word-break: break-word
    type: 'custom:button-card'
type: horizontal-stack


cards:
  - color_type: icon
    entity: input_boolean.porch_motion_notif
    icon: 'mdi:bell'
    name: Porch<br/>Motion
    state:
      - color: 'rgb(253,216,53)'
        value: 'on'
    styles:
      card:
        - height: 100px
      name:
        - text-overflow: unset
        - white-space: unset
        - word-break: break-word
    type: 'custom:button-card'
  - color_type: icon
    entity: input_boolean.garage_door_notif
    icon: 'mdi:bell'
    name: Garage<br/>Door
    state:
      - color: 'rgb(253,216,53)'
        value: 'on'
    styles:
      card:
        - height: 100px
      name:
        - text-overflow: unset
        - white-space: unset
        - word-break: break-word
    type: 'custom:button-card'
  - color_type: icon
    entity: input_boolean.door_bell_notif
    icon: 'mdi:bell'
    name: Door<br/>Bell
    state:
      - color: 'rgb(253,216,53)'
        value: 'on'
    styles:
      card:
        - height: 100px
      name:
        - text-overflow: unset
        - white-space: unset
        - word-break: break-word
    type: 'custom:button-card'
  - color_type: icon
    entity: input_boolean.presence_notif
    icon: 'mdi:bell'
    name: <br/>Presence
    state:
      - color: 'rgb(253,216,53)'
        value: 'on'
    styles:
      card:
        - height: 100px
      name:
        - text-overflow: unset
        - white-space: unset
        - word-break: break-word
    type: 'custom:button-card'
type: horizontal-stack
3 Likes