# \[IGN-3345\] Perspective Style Classes - text-overflow ellipsis **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [September 2, 2022, 8:39am UTC](https://forum.inductiveautomation.com/t/ign-3345-perspective-style-classes-text-overflow-ellipsis/63709 "2022-09-02T08:39:14Z")\ **Posts on this page:** 14\ **Page:** 1
**Author:** ![ISEMAREN\_AAG](https://avatars.discourse-cdn.com/v4/letter/i/82dd89/32.png) [@ISEMAREN\_AAG](https://forum.inductiveautomation.com/u/ISEMAREN_AAG)\ **Post date:** [September 2, 2022, 8:39am UTC](https://forum.inductiveautomation.com/t/ign-3345-perspective-style-classes-text-overflow-ellipsis/63709/1 "2022-09-02T08:39:14Z")
Good morning. I am using Ignition **8.1.15** and I would like that when a text does **not fit in a label** , **ellipses** (...) appear. I have set the style class in this way, but it doesn't work. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/5/35102a0c616448cdb116cf03876dedf5c38b2a46.png) * * * ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/3/a3b19bb8f7a0e8709f856340ec8a56222b4425f0.png) Best Regards. ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [September 2, 2022, 12:35pm UTC](https://forum.inductiveautomation.com/t/ign-3345-perspective-style-classes-text-overflow-ellipsis/63709/2 "2022-09-02T12:35:02Z")
In which container is the label? ---
**Author:** ![ISEMAREN\_AAG](https://avatars.discourse-cdn.com/v4/letter/i/82dd89/32.png) [@ISEMAREN\_AAG](https://forum.inductiveautomation.com/u/ISEMAREN_AAG)\ **Post date:** [September 2, 2022, 4:09pm UTC](https://forum.inductiveautomation.com/t/ign-3345-perspective-style-classes-text-overflow-ellipsis/63709/3 "2022-09-02T16:09:55Z")
The label is a flex container. ---
**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:** [September 2, 2022, 4:21pm UTC](https://forum.inductiveautomation.com/t/ign-3345-perspective-style-classes-text-overflow-ellipsis/63709/4 "2022-09-02T16:21:08Z")
This is a known issue with multiple components. We have an open issue to repair the problem, but no ETA. ---
**Author:** ![ISEMAREN\_AAG](https://avatars.discourse-cdn.com/v4/letter/i/82dd89/32.png) [@ISEMAREN\_AAG](https://forum.inductiveautomation.com/u/ISEMAREN_AAG)\ **Post date:** [September 2, 2022, 4:24pm UTC](https://forum.inductiveautomation.com/t/ign-3345-perspective-style-classes-text-overflow-ellipsis/63709/5 "2022-09-02T16:24:40Z")
Thanks. ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [September 5, 2022, 7:23am UTC](https://forum.inductiveautomation.com/t/ign-3345-perspective-style-classes-text-overflow-ellipsis/63709/6 "2022-09-05T07:23:50Z")
In the mean time you can add this workaround: Put this in the backgroundimg of the style, change the `StyleFolder\/StyleName` to match your style class (escape the `/` for folders) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/b/7bd6643532f72ed253b2de21866119741c0d1f44.png) ```auto }.psc-StyleFolder\/StyleName span{overflow:hidden; text-overflow:ellipsis;} .psc-StyleFolder\/StyleName{ ``` ---
**Author:** ![ISEMAREN\_AAG](https://avatars.discourse-cdn.com/v4/letter/i/82dd89/32.png) [@ISEMAREN\_AAG](https://forum.inductiveautomation.com/u/ISEMAREN_AAG)\ **Post date:** [September 6, 2022, 7:46am UTC](https://forum.inductiveautomation.com/t/ign-3345-perspective-style-classes-text-overflow-ellipsis/63709/7 "2022-09-06T07:46:25Z")
Ok. Thanks. ---
**Author:** ![bao.nguyen](https://avatars.discourse-cdn.com/v4/letter/b/8c91f0/32.png) [@bao.nguyen](https://forum.inductiveautomation.com/u/bao.nguyen)\ **Post date:** [December 2, 2022, 1:21am UTC](https://forum.inductiveautomation.com/t/ign-3345-perspective-style-classes-text-overflow-ellipsis/63709/8 "2022-12-02T01:21:02Z")
Hi, This bug has been fixed since 8.1.11. [https://forum.inductiveautomation.com/t/nightly-8-1-changelogs-2021/42410/158](https://forum.inductiveautomation.com/t/nightly-8-1-changelogs-2021/42410/158) > Added textStyle prop to the Label Component. It allows for text overflow ellipsis. To display ellipsis, set props.textStyle overflow: hidden, whiteSpace: nowrap, textOverflow: ellipsis. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/0/602e13ee59a1e09aceabd32feced41cb24eb8a19.png) Hope you will find this helpful. Kind regards. ---
**Author:** ![ISEMAREN\_AAG](https://avatars.discourse-cdn.com/v4/letter/i/82dd89/32.png) [@ISEMAREN\_AAG](https://forum.inductiveautomation.com/u/ISEMAREN_AAG)\ **Post date:** [December 2, 2022, 1:17pm UTC](https://forum.inductiveautomation.com/t/ign-3345-perspective-style-classes-text-overflow-ellipsis/63709/9 "2022-12-02T13:17:10Z")
Good morning. The problem is that I want to bind these properties (and others) in "style -\> classes". So the solution is to create a Style Class with just those 3 properties and bind it to "textStyle -\> classes"? ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/8/d87f78969ebc0326341b462786a5c6ae3b17f675.png) ---
**Author:** ![mahsasalimi](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mahsasalimi/32/68520_2.png) [@mahsasalimi](https://forum.inductiveautomation.com/u/mahsasalimi)\ **Post date:** [June 4, 2024, 5:55am UTC](https://forum.inductiveautomation.com/t/ign-3345-perspective-style-classes-text-overflow-ellipsis/63709/10 "2024-06-04T05:55:40Z")
hi , does this really work? I have a label in a flex container and and I set it to show ellipsis when overflows , it doesnt work . I am using version 8.1.40 ---
**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:** [June 4, 2024, 2:20pm UTC](https://forum.inductiveautomation.com/t/ign-3345-perspective-style-classes-text-overflow-ellipsis/63709/11 "2024-06-04T14:20:51Z")
It's not as simple as applying `textOverflow: ellipsis`: you must also apply `overflow: hidden` AND `whiteSpace: nowrap`. I've verified it does work in a Flex Container. ![Screenshot 2024-06-04 at 7.20.35 AM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/3/c3589d708dd91d333bc54c06a03417bba7c54ad2.png) ---
**Author:** ![Eugene49](https://avatars.discourse-cdn.com/v4/letter/e/c6cbf5/32.png) [@Eugene49](https://forum.inductiveautomation.com/u/Eugene49)\ **Post date:** [February 12, 2025, 9:11pm UTC](https://forum.inductiveautomation.com/t/ign-3345-perspective-style-classes-text-overflow-ellipsis/63709/12 "2025-02-12T21:11:19Z")
This is very cool.. I was looking for this early on: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/2/42160ec773c5efcabae4d5e543a926d0e41fd6fe.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/1/818ee09fe8c0428ed4c5efcb88926a4b4f7a45b6.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/a/7af9c11b0fe8f3f43b7146da2985d4281833fb05.png) Hoping/asking someone can translate it to ellipsis in the middle: "The quick...over the lazy dog" What to use it when paths is too long.. "site/bldg/department/zone" ---
**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\ **Post date:** [February 12, 2025, 11:00pm UTC](https://forum.inductiveautomation.com/t/ign-3345-perspective-style-classes-text-overflow-ellipsis/63709/13 "2025-02-12T23:00:23Z")
> [@Eugene49](#): > > Hoping/asking someone can translate it to ellipsis in the middle: You can't with just CSS, you'd have to run custom Javascript, which Perspective deliberately \[1\] does not let you. * * * 1. outside of unsupported "hacks" ---
**Author:** ![mmadariaga](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mmadariaga/32/63201_2.png) [@mmadariaga](https://forum.inductiveautomation.com/u/mmadariaga)\ **Post date:** [September 26, 2025, 11:37am UTC](https://forum.inductiveautomation.com/t/ign-3345-perspective-style-classes-text-overflow-ellipsis/63709/14 "2025-09-26T11:37:37Z")
This doesn't work on table columns right? I use embedded views with labels to achieve this because I can't manage to get the three dots on normal string columns.