how to get a Flex text control to word wrap

Question

I had this same problem. In my case I had a mx:Text block (that SHOULD have wrapped), and that mx:Text object was embedded within TWO mx:VBox containers.

The only way that I got the text to wrap successfully was to do BOTH of the following:

1. put the ' width="100%" ' property into EACH VBox container (in which the mx:text resided).
2. put the ' width="100%" ' property into EACH mx:Text object (residing within this nesting of VBox's)

Very non-intuitive, but this is what worked for me.

I hope this helps you!

Jon Kinsting

Percentage widths and heights actually resolve to their pixel equivalents, so using them should achieve the wrapping and relative sizing you're looking for. For example:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%">
    <mx:Text width="100%" height="100%" text="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.  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." />
</mx:Application>

That is, provided there's a width setting of any kind, relative sizing (an explicit number, a percentage, a constraint-based anchor -- e.g., top, right, bottom, left -- etc.) should cause the text to wrap naturally. Does this approach not work with the layout you're using? Without some code, it's hard to tell, but you're right -- wrapping does require setting a width-related property on the container.

Resizing and wrapping can be a little tricky, though, depending on the context, so if you find this doesn't work, try posting some code -- I'm sure one of us will be able to help you figure it out.

If you're trying to get the text wrap to work inside an MXML component try this:

<mx:Text id="testText"  
  width="{ this.width }"
  height="100%"   
  text="Your text here" />

You're basically setting the width to the width of the component and setting the height to 100% will allow it to wrap correctly when you shrink the size.