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.

Answer 1

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

Answer 2

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 -- eg, 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.

Answer 3

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.

Answer 4

I think applying VBox width = "100%" and Text width = "100%" is the simplest way. Note: if Text is dynamically generated, don't forget to do text.percentWidth = 100

Answer 5

So Christian's example of just an Application with a Text element inside work, but it is far too easy to screw up the layout. Just add one VBox inbetween and wrapping does not work:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%">
<mx:VBox width="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:VBox>
</mx:Application>

Answer 6

You could try adding an event handler to the parent node for Event.RESIZE , and call the Text object's validateNow() method. (Perhaps preceded by an invalidateSize() call.) Why doesn't this happen automatically I cannot tell.

Answer 7

尝试在文本字段中设置htmlText =“true”。

Answer 8

I could do it using only mxml. The result is quite ugly, but I could do it.

<s:Group id="propDisplay" width="100%">
    <mx:Text id="key" left="0" text="{data.key}:"/>
    <mx:Text left="{key.width}" maxWidth="{propDisplay.width - key.width}" 
                             text="{data.value}" />
</s:Group>

Answer 9

render="invalidateSize();validateNow();
'component id'.mx_internal::getTextField().wordWrap=true"

add this to your text component.