Truncating text in the Flex Label control using the truncateToFit property

A quick comment to add that ‘truncateToFit’ won’t show the ‘…’ ending string on HTML Labels. They only get truncated.

Here what you can find in Label.as :

// Plain text gets truncated with a "...".
// HTML text simply gets clipped, because it is difficult
// to skip over the markup and truncate only the non-markup.
// But both plain text and HTML text gets an automatic tooltip
// if the full text isn't visible.

Reply

@rob there’s a couple of ways I can think of. Inline:

<mx:Label id="_alabel" text="hello" toolTip="{_alabel.text}" />

secondly, you could subclass label and override the setter for the text property and assigning the text being set to the tooltip. i haven’t tried this, so this code is off the top of my head:

public class TippedLabel extends Label {

  override public function set text(o:String) : void {
    super.text = o;
    super.toolTip = o;
  }

}

Hope that helps.

Cheers,
Chris

Reply

One possible solution would be:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
		import mx.utils.StringUtil;
		[Bindable]
		private var longString:String = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
		private var maxStringLength:int = 50;
		private function truncatedString(source:String):String {
			var shortString:String = StringUtil.trim(source);
			shortString = shortString.substr(0, maxStringLength);
			if (source.length != 0 && source.length > maxStringLength) {
				shortString += "...";
			}
			return shortString;
		}
		]]>
	</mx:Script>
	<mx:Panel layout="absolute" left="10" right="10" bottom="10" top="10">
		<mx:TextArea x="10" y="10" maxWidth="200" maxHeight="50" text="{truncatedString(longString)}" id="lblLongText" height="65" wordWrap="true"/>
	</mx:Panel>

</mx:Application>

Reply

Is there a way to get truncated text to move left and right periodically so you can read the entire label?

Reply

@prashant:

check this:
http://skovalyov.blogspot.com/2007/02/text-control-with-truncatetofit.html

Reply

I’m having trouble with this truncateToFit thing: it seems as if Flex does’nt find the appropriate text (“…”) to use – it is always displaying the text cut off and adds “null” to its end instead. Maybe this is because I’m using a differend resource bundle for all my texts (i18n). Which key do I have to use to give the “…” text back to my Flex application? Does anyone know?
Help is really appreciated.

Reply

Hi,

I am facing an issue while scaling a Label with truncateToFit property as true. While zooming in/out, sometimes the text which is truncated is displayed without ellipses or 1 or 2 ellipses sometimes. I tried setting fontAntiAliasType=”animation” thinking that it might solve the issue.
But it didnt :-(

Please find the code below:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
    <mx:Script>
        <![CDATA[
            private function zoom():void
            {
                c.scaleY = slider.value / 100;
                c.scaleX = slider.value / 100;
            }
        ]]>
    </mx:Script>
    <mx:Canvas id="c" x="109" y="111" width="156" height="41" scaleX="0.5" scaleY="0.5">
        <mx:Label id="l1" x="28" y="10" text="Labelgettingtruncatedddddddddd" width="100" truncateToFit="true" fontAntiAliasType="animation"/>
    </mx:Canvas>
    <mx:VSlider id = "slider"
                minimum = "5"
                maximum = "200"
                value = "100"
                snapInterval = ".001"
                liveDragging = "true"
                change = "zoom();"/>
</mx:Application>

Could anyone of you help me finding whats going wrong here?

Thanks in Advance,Srilatha

Reply