Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to get a Flex text control to word wrap

People also ask

How do you wrap text in Flex?

As you only want the text itself to wrap you need to use flex-wrap: nowrap; to keep . right on the same line. The text will automatically wrap when there is not enough space.

How do I force word-wrap?

You can force long (unbroken) text to wrap in a new line by specifying break-word with the word-wrap property. For example, you can use it to prevent text extending out the box and breaking the layout. This commonly happens when you have a long URL in the sidebar or comment list.

How do I turn on text wrapping in word?

Go to Picture Format or Shape Format and select Arrange > Wrap Text. If the window is wide enough, Word displays Wrap Text directly on the Picture Format tab. Choose the wrapping options that you want to apply. For example, In Line with Text, Top and Bottom, and Behind Text.

Why is my text not wrapping in word?

Right-click the control for which you want to enable or disable text wrapping, and then click Control Properties on the shortcut menu. Click the Display tab. Select or clear the Wrap text check box.


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.