Wrap long lines in a Spark List component?

Question

I have a Spark List. 
The text for each entry is on one line, and is too long to fit.
Can I get it to break to as many lines as needed without a custom item renderer?

Answer 1

If you define an explicit width on the SimpleText in the DefaultItemRenderer you can get this behavior.
Here is an example of this using an inline ItemRenderer:
<s:Application
     xmlns:fx="http://ns.adobe.com/mxml/2009"
     xmlns:s="library://ns.adobe.com/flex/spark"
     xmlns:mx="library://ns.adobe.com/flex/halo">
    <s:List width="50" height="200">
        <s:ArrayList>
            <fx:String>a</fx:String>
            <fx:String>b</fx:String>
            <fx:String>c c c c c c c c c c c c</fx:String>
            <fx:String>d</fx:String>
            <fx:String>e</fx:String>
        </s:ArrayList>
        <!-- here we define a custom item renderer inline (copied and modified from DefaultItemRenderer.mxml) -->
        <s:itemRenderer>
            <fx:Component>
                <s:ItemRenderer focusEnabled="false">
                    <fx:Script>
                        <![CDATA[
                            override public function set label(value:String):void
                                super.label = value;
                                labelDisplay.text = label;
                        ]]>
                    </fx:Script>
                    <s:states>
                        <s:State name="normal" />           
                        <s:State name="hovered" />
                        <s:State name="selected" />
                        <s:State name="normalAndShowsCaret"/>
                        <s:State name="hoveredAndShowsCaret"/>
                        <s:State name="selectedAndShowsCaret"/>
                    </s:states>
                    <s:Rect left="0" right="0" top="0" bottom="0">
                        <s:stroke.normalAndShowsCaret>
                            <s:SolidColorStroke
                                color="{selectionColor}"
                                weight="1"/>
                        </s:stroke.normalAndShowsCaret>
                        <s:stroke.hoveredAndShowsCaret>
                            <s:SolidColorStroke
                                color="{selectionColor}"
                                weight="1"/>
                        </s:stroke.hoveredAndShowsCaret>
                        <s:stroke.selectedAndShowsCaret>
                            <s:SolidColorStroke
                                color="{selectionColor}"
                                weight="1"/>
                        </s:stroke.selectedAndShowsCaret>
                        <s:fill>
                            <s:SolidColor
                                color.normal="{contentBackgroundColor}"
                                color.normalAndShowsCaret="{contentBackgroundColor}"
                                color.hovered="{rollOverColor}"   
                                color.hoveredAndShowsCaret="{rollOverColor}"
                                color.selected="{selectionColor}"
                                color.selectedAndShowsCaret="{selectionColor}"
                                />
                        </s:fill>
                    </s:Rect>
                    <!-- the only real change is to set a specific size on the SimpleText slightly smaller
                         than the width of the List to account for the border -->
                    <s:SimpleText id="labelDisplay" verticalCenter="0" width="48" top="6" bottom="4"/>
                </s:ItemRenderer>
            </fx:Component>
        </s:itemRenderer>
    </s:List>
</s:Application>