[Bug-1571]How do you prevent label from overflowing vertically?

I’m working on converting some screens from vision to perspective. Something that’s really bothering me right now is that I put text-overflow: ellipsis for my labels and yet tehy keep skipping a line instead of just showing … at the end. Here’s how it looks in vision, which is precisely what I want:
image

Now here’s how it looks in perspective:
image

And here’s how it looks when I put ellipsis with overflow hidden:
image

If I don’t put hidden it’s just the same as having no style. Is there a “No skipline” or something I haven’t found in there because this is annoying. I can’t make the boxes bigger so that’s as big as the labels are going to get. Best solution I have right now is reducing font size which I really don’t want to do.

Thanks!

You’re actually doing what is supposed to be done by using the ellipsis option, but that option is currently not working as expected. We have an open ticket to address the issue, though there is not ETA for when it might be completed.

Is there any other way this could be done then? I checked again and some are just too long so adjusting font size will not be possible. I tried Break-Word and it doesn’t change anything either. Since it has yet to be prioritized is there a recommended way of doing it in the meantime?

Unfortunately this is one situation where there isn’t a great workaround. The only suggestion I can offer is to limit the length of the text yourself. If you’re binding this text to a property, you could add a transform along these lines:

if len(value) > 20:
    return value[:20] + "..."
return value

This will result in only the first 20 characters of the string being returned along with an ellipsis, unless the string is already short enough - at which point you just return the string.

I found a better way after all!
I put textFields instead of labels and then I put these settings:

enabled: false
style:
textAlign: left
borderStyle: none
backgroundColor: transparent
textOverflow: ellipsis
overflow: hidden

Any updates?

you can use style

white-space:nowrap

to prevent text from going into multiple lines (overflow vertically)

2 Likes

If you also want it to use ellipses (…) you will have to add this into theme.css or through injection

for all lables:

.ia_labelComponent > span {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

with a styleclass named ellipseLabel put this in backgroundimage:
}.psc-ellipseLabel > span { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }{

1 Like