How to truncate text with ellipsis (…) in flex?

Question

In my flex app, I have a <mx:Text> control with a fixed height and width enough to show two lines. Now if the text is too long to be shown in two lines, I would like to have it truncated with showing ellipsis (...). The default truncation with ellipsis seems to be present with label, but label cannot show text in two lines.

How do I mimic this behavior in <mx:Text> control in flex? Thanks in advance!!!

Answer 1

The spark.components.Label component inherits the maxDisplayedLines property from spark.components.supportClasses.TextBase . Here is the help for that particular property:

An integer which determines whether, and where, the text gets truncated.

Truncating text means replacing excess text with a truncation indicator such as "...". The truncation indicator is locale-dependent; it is specified by the "truncationIndicator" resource in the "core" resource bundle.

If the value is 0, no truncation occurs. Instead, the text will simply be clipped if it doesn't fit within the component's bounds.

If the value is is a positive integer, the text will be truncated if necessary to reduce the number of lines to this integer.

If the value is -1, the text will be truncated to display as many lines as will completely fit within the height of the component.

Truncation is only performed if the lineBreak style is "toFit"; the value of this property is ignored if lineBreak is "explicit".

The default value is 0.

From this we can see that if you set the maxDisplayedLines property to -1, the component will display as much text as it can, and append the "..." if it had to truncate the text.

Answer 2

I know this is an old post, but lots of people still developing and maintaining mixed Spark/MX projects. So I will give my two cents for people that are still facing this problem, specially when using MX lists and datagrids and in need of a multiline truncation in the renderer.

As far as I can tell, the question is about MX components, using Spark would be a good choice, but only if possible.

So, in case a "s:Label" is not a choice, I would think that the best approach is to extend the MX Label component and set its textField's multiline property to true. That should do the trick, I'd first try adding that logic in the override of the updateDisplayList method.

Answer 3

It so happens that the Text class in Flex 3 is a subclass of Label. Which means setting "truncateToFit" property on your Text control to true should be enough.

Answer 4

The best solution I've found is via the spark Label and the maxDisplayedLines property, like so:

        <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:s="library://ns.adobe.com/flex/spark" >
            <s:Label text="{data.Name}" maxDisplayedLines="3" verticalAlign="middle" />
        </mx:Canvas>

Worked perfectly for me. In general I've found the spark Label to be better than the mx Label, but YMMV.

Answer 5

spark component Does have the trancion propert:@see. http://blog.flexexamples.com/2009/06/15/determining-if-a-spark-simpletext-control-is-truncated-in-flex-4/

Answer 6

I have a blog post on this topic here, that works well regardless of the version of Flex you are using:

http://www.tjdownes.com/post.cfm/easy-string-truncation-with-ellipsis-using-ternary-operators-in-as3

The short of it is this:

myString.slice(0, 150).concat(myString.length > 150 ? "..." : "");

This will truncate the string to 150 characters and if the string is longer than 150 characters it adds an ellipsis.

Answer 7

On flex 4 you need to set the Label#maxDisplayedLines to something above 0 and it will do the clipping for you.

See this to see how to customize the "..."