I’m trying to make my Lovelace UI more compact, but I’m running into lots of name truncation. Here’s an example:
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
You might try entering \n or <br/> to break up names. I do not know if it would work though,
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.
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:
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