how to get a Flex text control to word wrap

Question

I'm creating an Adobe Flex application and I have a Text control (mx:Text), which is supposedly used when you need multiline noneditable text (as opposed to a Label, which is single line noneditable text). My text control does not wrap when I resize the browser window to be smaller than the text (or load it with the browser window already smaller). Upon consulting this doc that I found, it would seem that the word-wrap functionality only happens if you specify an absolute width in pixels. That is exactly what I'm trying to avoid. I want the text to wrap to fit inside the size given to my Flash object so that it is always visible... is there any way to accomplish this, through some property I'm missing or perhaps a different control? Thanks.

Solution 1

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.

Solution 2

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.