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

**URL:** <https://forum.inductiveautomation.com/t/bug-1571-how-do-you-prevent-label-from-overflowing-vertically/44516>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [March 16, 2021, 12:40pm UTC](https://forum.inductiveautomation.com/t/bug-1571-how-do-you-prevent-label-from-overflowing-vertically/44516 "2021-03-16T12:40:05Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![philippe.theroux](https://avatars.discourse-cdn.com/v4/letter/p/7ea924/32.png) [@philippe.theroux](https://forum.inductiveautomation.com/u/philippe.theroux)\
**Post date:** [March 16, 2021, 12:40pm UTC](https://forum.inductiveautomation.com/t/bug-1571-how-do-you-prevent-label-from-overflowing-vertically/44516/1 "2021-03-16T12:40:05Z")

</div>

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](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/6/f64fb505e67786e4b5dfb23b84f5149824fc5b32.png)

Now here’s how it looks in perspective:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/6/7660376b995045d3af4338441a126586214d007b.png)

And here’s how it looks when I put ellipsis with overflow hidden:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/8/1855fac6e830fdad0b6dd0c3c7c51f3edbee79b6.png)

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!

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [March 16, 2021, 2:52pm UTC](https://forum.inductiveautomation.com/t/bug-1571-how-do-you-prevent-label-from-overflowing-vertically/44516/2 "2021-03-16T14:52:29Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![philippe.theroux](https://avatars.discourse-cdn.com/v4/letter/p/7ea924/32.png) [@philippe.theroux](https://forum.inductiveautomation.com/u/philippe.theroux)\
**Post date:** [March 16, 2021, 4:13pm UTC](https://forum.inductiveautomation.com/t/bug-1571-how-do-you-prevent-label-from-overflowing-vertically/44516/3 "2021-03-16T16:13:17Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [March 16, 2021, 5:21pm UTC](https://forum.inductiveautomation.com/t/bug-1571-how-do-you-prevent-label-from-overflowing-vertically/44516/4 "2021-03-16T17:21:37Z")

</div>

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:

```auto
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.

---

<div class="post-metadata">

**Author:** ![philippe.theroux](https://avatars.discourse-cdn.com/v4/letter/p/7ea924/32.png) [@philippe.theroux](https://forum.inductiveautomation.com/u/philippe.theroux)\
**Post date:** [April 7, 2021, 5:52pm UTC](https://forum.inductiveautomation.com/t/bug-1571-how-do-you-prevent-label-from-overflowing-vertically/44516/5 "2021-04-07T17:52:45Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![indenkleefj](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/indenkleefj/32/10961_2.png) [@indenkleefj](https://forum.inductiveautomation.com/u/indenkleefj)\
**Post date:** [October 14, 2021, 11:31am UTC](https://forum.inductiveautomation.com/t/bug-1571-how-do-you-prevent-label-from-overflowing-vertically/44516/6 "2021-10-14T11:31:00Z")

</div>

Any updates?

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [October 14, 2021, 11:54am UTC](https://forum.inductiveautomation.com/t/bug-1571-how-do-you-prevent-label-from-overflowing-vertically/44516/7 "2021-10-14T11:54:22Z")

</div>

you can use style

`white-space:nowrap`

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

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [October 14, 2021, 12:28pm UTC](https://forum.inductiveautomation.com/t/bug-1571-how-do-you-prevent-label-from-overflowing-vertically/44516/8 "2021-10-14T12:28:17Z")

</div>

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

for all lables:

```auto
.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; }{`

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/7/17278835ff1c1cda6101d994f4b87d26a659d444.png)

---

<div class="post-metadata">

**Author:** ![tecnoeletronic](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tecnoeletronic/32/50975_2.png) [@tecnoeletronic](https://forum.inductiveautomation.com/u/tecnoeletronic)\
**Post date:** [May 21, 2024, 1:28pm UTC](https://forum.inductiveautomation.com/t/bug-1571-how-do-you-prevent-label-from-overflowing-vertically/44516/9 "2024-05-21T13:28:45Z")

</div>

Hi, try this on Label:

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/c/ecdaf587ce85e8ebc58b81a03eceadc5f617b31e.png)