for reference to the community, answering myself here… This is what I found to be working for my single button in the button config:
name_template: >
var fakestate = `<span style="color: #555B65;font-size: 11px"> ${entity.state.substr(0, entity.state.length-11)} </span>`;
return 'Last motion' + "<br>" + fakestate
tried it without var at first, using the html code in the name_template directly, but it kept showing that html code on the button. Using the var does the trick, but probably because I didnt find the correct syntax.
@RomRider is the css code for word-wrap below not yet supported on your Button card? Ive tried various options and places in the config, but no change in output (no error either):
styles:
name:
- word-wrap: break-word
or maybe even:
styles:
card:
- word-wrap: break-word
would be really nice and cleaner to be able to set that in the config, and not have to use the name_template version. Please consider adding that, and overflow-wrap?
I ask because I’ve also tried to set the overflow-wrap or word-wrap in the css setting for the html element:
name_template: >
var fakestate = `<span style="color: #555B65;font-size: 11px;word-wrap:break-word;"> ${entity.state.substr(0, entity.state.length-11)} </span>`;
return 'Last motion' + "<br>" + fakestate
without succes unfortunately. Not sure if this is a Button-card issue or HA issue, but fact of the matter is I need the word-wrap property and can’t get it to work as it should…