Blog

Text - How to truncate and add 3 dots / ellipsis to long label text

If you need to summarise long text by only showing the first characters and adding '...' to the end of the text, this post shows the easiest way to carry out this task.

When building apps, we can present data more concisely and in a more user-friendly way by truncating long context and indicating this truncation by suffixing the value with ellipsis/three dots.

A simple way to carry out this task is to use a label control and to utilise the Wrap property. This post walks through a demonstration of how to carry out this task.

Demonstration - The easiest way to add 3 dots to long text

To demonstrate, we'll add a 'Flexible Height Gallery' control and set the Items property to an example list of Issue records.

Within the gallery control, we'll add a label and set the text property to the Description field. The layout looks like this.



To truncate the text and show the elilpes, we set the Wrap property of the label to Off. The result is shown in the screenshot below.

How to display/toggle between full text and truncated mode

To enable the user to see the full text, it can be very helpful to toggle the text between truncated and full mode by clicking the label. We can do this by using a variable to control the Wrap property.

Before doing this, the first step is to set the Auto height property to on. This will configure the label to grow automatically in height to accommodate the length of the text.




Next, we add the following formula to the OnVisible property of the screen to intialise a variable. 
UpdateContext({locShowFullText: false})

Next, we add the following formula to the OnSelect property of the label to toggle the value of the variable. 
UpdateContext({locShowFullText: !locShowFullText})

Finally, we set the Wrap property of the label to locShowFullText



At this point, we can run our app. Clicking the label will now toggle the label text between full and truncated mode.



Conclusion

If you need to show the first few characters of a long piece of text and add 3 dots/ellipsis to the end of the shortened text, you can use the wrap property of the label to carry out this task. This post demonstrated this technique using text from a gallery.
  •   Categories: 
  • text
Previous
Next
Related posts