Wrap property on Text control does not work

Question

I have the following CustomListItem:

<CustomListItem>
    <l:VerticalLayout class="nestedFlexboxes" width="100%">
        <l:content>
            <Title class="sapUiSmallMarginBegin sapUiSmallMarginTop" level="H3" text="{ac>Description}" wrapping="false"/>
            <HBox fitContainer="true" justifyContent="End" alignItems="Stretch">
                <items>
                    <Button icon="sap-icon://hint" type="Transparent" class="sapUiSmallMarginEnd"></Button>
                    <Button icon="sap-icon://cart" type="Transparent" class="sapUiSmallMarginEnd"></Button>
                </items>
            </HBox>
        </l:content>
    </l:VerticalLayout>
</CustomListItem>

and would like to wrap the text on Text control. I have set the property but it does not work:

What I expect is, when there is no spaces for text, then it should add ... as:

What am I doing wrong?

Answer 1

Code:

    <List width="30%">
        <CustomListItem>
            <l:VerticalLayout class="nestedFlexboxes" width="100%">
                <l:content>
                    <Title class="sapUiSmallMarginBegin sapUiSmallMarginTop" level="H3"
                        text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."
                        wrapping="false"/>
                    <HBox fitContainer="true" justifyContent="End" alignItems="Stretch">
                        <items>
                            <Button icon="sap-icon://hint" type="Transparent" class="sapUiSmallMarginEnd"></Button>
                            <Button icon="sap-icon://cart" type="Transparent" class="sapUiSmallMarginEnd"></Button>
                        </items>
                    </HBox>
                </l:content>
            </l:VerticalLayout>
        </CustomListItem>

Leads to the following Result:

If you cut the StyleClass "sapUiSmallMarginBegin" from the sap.m.Title

Code:

    <List width="30%">
        <CustomListItem>
            <l:VerticalLayout class="nestedFlexboxes" width="100%">
                <l:content>
                    <Title class="sapUiSmallMarginTop" level="H3"
                        text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."
                        wrapping="false"/>
                    <HBox fitContainer="true" justifyContent="End" alignItems="Stretch">
                        <items>
                            <Button icon="sap-icon://hint" type="Transparent" class="sapUiSmallMarginEnd"></Button>
                            <Button icon="sap-icon://cart" type="Transparent" class="sapUiSmallMarginEnd"></Button>
                        </items>
                    </HBox>
                </l:content>
            </l:VerticalLayout>
        </CustomListItem>
    </List>

Leads to the following Result:

I don't know what your StyleClass nestedFlexboxes does. So my Advice play around a bit with the Style Classes to fix the Problem.

Possible Workaround: (Using sap.m.VBox instead of sap.ui.layout.VerticalLayout)

    <CustomListItem>
            <VBox class="nestedFlexboxes sapUiTinyMarginBeginEnd">
                <Title class="sapUiSmallMarginTop" level="H3"
                    text=" Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."
                    wrapping="false"/>
                <HBox fitContainer="true" justifyContent="End" alignItems="Stretch">
                    <items>
                        <Button icon="sap-icon://hint" type="Transparent" class="sapUiSmallMarginEnd"></Button>
                        <Button icon="sap-icon://cart" type="Transparent" class="sapUiSmallMarginEnd"></Button>
                    </items>
                </HBox>
            </VBox>
        </CustomListItem>

Leads to the following Result: