Products
Technologies

Developer resources

Get truncateToFit for htmlText with and without text wrapping!

Avg. Rating 5.0
Tags:



Problem

The standard Label component truncateToFit feature that adds ellipses to displayed text that does not fit in its boundaries only works for text that does not have html markup. The truncateToFit feature is also limited to only the Label component which only allows single line text. To do multiple line text, you need the Text component which has the truncateToFit disabled.

Solution

We override the existing functionality of the Label component and mix in some fancy markup parsing and a html truncateToFit component is born. And while we were at it, added the same functionality to the Text component as well allowing for truncateToFit to work for wrapped text.

Detailed explanation

 There still are some fringe cases that needs to be handled but all in all, the LabelAdv and TextAdv components handle text / htmlText truncation with and without text wrapping. The only thing that needs to be done to have the truncation function correctly is to set truncateToFit to true and specify width ( and the height for TextAdv ) of the component. The new components accept percent widths and height as well as max width / heights. The max width / height is useful for setting a maximum number of visible lines before we truncate.

Let me know if there are any bugs... I am sure there are many but this is definately a good start!.


+
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.

Report abuse

Related recipes