The Noob's (in)complete guide to CSS for Hubitat

📱 Mobile Apps
49

It follows the original text’s wrapping. It is only hidden. For this type of issue another styling would be needed. I’ll have a look at it later when I’m in front of the computer.

EDIT:
@ktd The below should work better, tell me how it goes...

.tile-title::after {
    visibility: visible;
    position: absolute;
    text-align: center;
    left: inherit;
    right: 0;
    bottom: 0;
    white-space: pre-wrap;
}

#tile-33 .tile-title, #tile-50 .tile-title {
    visibility: hidden;
    white-space: nowrap !important;
    overflow: unset;
}
#tile-33 .tile-title:after {
    content: 'Lights - Guest Bath Basin';
}
#tile-50 .tile-title:after {
    content: 'Lights - Guest Bath Basin';
}

If you want to set the title of ALL tiles, just hide all like this first:

.tile-title {
    visibility: hidden;
    white-space: nowrap !important;
    overflow: unset;
}

or just multiple:

#tile-33 .tile-title, #tile-50 .tile-title, #tile-16 .tile-title {
    visibility: hidden;
    white-space: nowrap !important;
    overflow: unset;
}

This MAY not be pixel perfect on mobile devices, you could try "left: 0;" instead of "left: inherit;"

5 Likes