Unanswered

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

(0) Share

Report

Posted on by 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?

Categories:

Building Power Apps

labelWrap.png

I have the same question (0)

All responses (9)

Answers (0)

mdevaney 29,989 Moderator on at

Like (1)

Report

@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/534187

---
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."

Was this reply helpful? Yes No
Przemyslaw 3 on at

Like (0)

Report

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.

Was this reply helpful? Yes No
Community Power Pla... on at

Like (4)

Report

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

Was this reply helpful? Yes No
Community Power Pla... on at

Like (7)

Report

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

Was this reply helpful? Yes No
kristinegriba 156 on at

Like (0)

Report

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

Was this reply helpful? Yes No
GeetanshuKamboj 4 on at

Like (1)

Report

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

Was this reply helpful? Yes No
Yapski_ 4 on at

Like (0)

Report

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

Was this reply helpful? Yes No
TomLanz 9 on at

Like (1)

Report

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.

Was this reply helpful? Yes No
kristinegriba 156 on at

Like (0)

Report

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.

Was this reply helpful? Yes No