Flex - Laying out text within a Canvas

Question

Here's a problem I keep running into:

I have a lot of situations where I need to display some text with a styled container like so:

<mx:Canvas>
     <mx:Text text="{text}" left="5" verticalCenter="0" right="5" />    
</mx:Canvas>

As you can see - the text in constrained by the left and right margins of the canvas and I have not specified a height for the text control because I want it to grow vertically when I add text to it. Reason being - if there is one line of text I want it to display in the center of the canvas but if there are two or three lines of text I want the text control to show those two or three lines of text.

What keeps happening however, is that it will only display one line of text - no matter how many times I call invalidateSize() on it or the container. What do I do?

CAVEAT: The canvas height and width is set by the component that instantiates it (this is all wrapped up in a custom component) so I can't explicitly set the width or height of the text control...

NOTE: Ok, maybe it's an easy fix because as I was typing this question I figured it out - but, here's a chance to answer an easy question!?

Answer 1

Take a look at the TextArea component.

Answer 2

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>