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.
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.
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.
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:
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With