Truncating text in the Flex Label control

In Flex, if the text in your label control is exceeding the size of the label, what should you do? One way is to truncate the text inside that and show the complete text in the tooltip when the mouse hovers over the label. This solution is supplied by Flex SDK. You can achieve this using mxml as follows :

<mx:Label text=”The quick brown fox jumped over the lazy dog.”
truncateToFit=”true”
maxWidth=”200″ />

The same thing can be achieved using actionscript like :

var label:Label = new Label();
label.text = “The quick brown fox jumped over the lazy dog.”;
label.truncateToFit = true;
label.maxWidth = 200;

Pts to be noted here :

  • The text will be truncated to be fit into the container and three dots will be added to the end of the text to denote it have more text to display
  • The width of label shouldn’t be defined in percentage (likelabel.percentWidth=100)

That’s it guys.. Enjoy and Happy Coding.. Cheers..

Advertisements

Tags: , , , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: