multiline label and ellipsis("...") when text does not fit, wrap property

[Przemyslaw]

Hi, 

when I have a label which is not big enough to store the text then I can setup my label to put ellipsis ("...") at the end of the text automatically. This can be done with settings:

label.wrap = Off

label.autoHeight=Off

So when I have very long piece of text  (e.g. "very long text. Very long text"). it just shows, e.g. : 

Very long t...

What I want to achieve is to have the same behavior but for multiple lines (e.g. 2 lines) of text.

I created label which is 3 times as height and I put the same settings (label2.wrap = Off  label2.autoHeight=Off)

Unfortunately this does not work and only single line of text is being displayed (ended with ellipsis). 

Does anyone know how this can be achieved?

[mdevaney]

@Przemyslaw 
A canvas-apps component that will solve your issue is available for FREE on the community gallery.   In fact, Emmanuel Gallis (aka R3dkap) has a bunch of awesome components there worth checking-out 🙂

Link to component:

https://powerusers.microsoft.com/t5/Canvas-Apps-Components-Samples/Auto-Width-Label-Generator/td-p/5...

---
Please click "Accept as Solution" if my post answered your question so that others may find it more quickly. If you found this post helpful consider giving it a "Thumbs Up."

[Przemyslaw]

hi @mdevaney 

thanks for this, it is interesting and potentially it might help creating working solution, but I am afraid a lot of effort would be required. Problem with multiple lines is that you never know how powerapp will divide the sentence into multiple lines. Usually powerapp is trying to not divide words if possible, unless your label is very narrow. It would be a lot of hassle to divide the sentence programatically into lines (by adding line feed into the string) to have full control over it and then to add "..." at the very end. 

I was hoping there is some easier way of doing this, maybe someone else might help here? Thanks for your suggestion.

[Anonymous]

If(Len(ThisItem.Arm_Sl_Name) >= 70; Replace(ThisItem.Arm_Sl_Name; 70; Len(ThisItem.Arm_Sl_Name)-69; "..."); ThisItem.Arm_Sl_Name)

This formula in labels works, you only show the number of chars you want and then  the "...".
The "70" you have to change for the number you want, depending on the width.
Hope it helps

[Anonymous]

Hi. I solved this for using the following
If(Len(ThisItem.Title)>45, Concatenate(Left(ThisItem.Title,45),"..."),ThisItem.Title)

Assuming the field is called ThisItem.Title and the length limit is 45 characters

[kristinegriba]

@Anonymous I tried this and it worked awesome... great idea, too! Thanks!

[GeetanshuKamboj]

turn onn the wrap property of the text and this will fix the problem.

[Yapski_]

Changing the 'Wrap' property to 'false' solved the issue for me.
Thx for the hint!

[TomLanz]

I came up with another approach here that's a little more involved, but results in a more flexible and nicer (I think) looking UI:

I dropped my variable length text label inside a fixed height container. The text label is set to wrap, and auto-height. Also in the container is a transparent-to-white fade svg image that sits over the top of the text label, but is only visible if the text label height exceeds the container height. So three lines of text will show, but if it stretches to four, then it fades out. 

This has the benefits of using all available space, still giving the visual queue that there's more available, and also scales if your app UI is responsive. 

[kristinegriba]

This sounds like a very appealing approach. I am currently working on an app where I will need to introduce some kind of feature just like this, and I think I will give that a whirl when the time comes. I agree that it would be a nicer UI.