How to truncate text with ellipsis (…) in flex

The Text component needs a width if you want it to automatically wrap for you. If you used a string with newlines in it it will work grow as you expected without a width. For you, use:

Edit: Ok, you want it centered in a canvas of varying size. Then you can:

<mx:HBox 
    width="500"
    paddingLeft="5"
    paddingRight="5">
    <mx:Spacer width="100%" />
    <mx:Text 
        width="100%"
        text="{text}" />
    <mx:Spacer width="100%" />
</mx:HBox>

I've been dealing with this issue myself, off and on and in various forms, for a year, and while I haven't figured out just what's causing it yet, there's clearly a mismeasurement happening somewhere along the line.

What I have been able to to, though, is work around it, essentially by subclassing button-type controls (in my case, Button, LinkButton, PopUpButton, et. al.) and assigning their textField members instances of a UITextField extension whose truncateToFit element simply returns false in all cases:

public class NonTruncatingUITextField extends UITextField
{
    public function NonTruncatingUITextField ()
    {
        super();
    }

    override public function truncateToFit(s:String = null):Boolean
    {
        return false;
    }
}

The custom component just extends Button (or whatever other button-type control is the culprit -- I've created a half-dozen or so of these myself, one for each type of control), but uses a NonTruncatingTextField as its label, where specified by the component user:

public class NonTruncatingButton extends Button
{
    private var _truncateLabel:Boolean;

    public function NonTruncatingButton()
    {
        super();

        this._truncateLabel = true;
    }

    override protected function createChildren():void
    {
        if (!textField)
        {
            if (!_truncateLabel)
                textField = new NonTruncatingUITextField();
            else
                textField = new UITextField();

            textField.styleName = this;

            addChild(DisplayObject(textField));
        }

        super.createChildren();
    }

    [Inspectable]
    public function get truncateLabel():Boolean
    {
        return this._truncateLabel;
    }

    public function set truncateLabel(value:Boolean):void
    {
        this._truncateLabel = value;    
    }   
}

... so then finally, in your MXML code, you'd reference the custom component thusly (in this case, I'm telling the control never to truncate its labels):

<components:NonTruncatingButton id="btn" label="Click This" truncateLabel="false" />

I agree it feels like a workaround, that the component architecture ought to handle all this more gracefully, and that it's probably something we're both overlooking, but it works; hopefully it'll solve your problem as you search for a more definitive solution. (Although personally, I'm using it as-is, and I've moved on to other things -- time's better spent elsewhere!)

Good luck -- let me know how it works out.