Large text is shown as ..... in SAPUI5 - sapui5

Question

I have a large text to be displayed in each tab of IconTabBar.
Everything works fine.
But, the text is not shown completely.
Problem: "My large Text to be shown" is displayed as "My large Text ....."
I couldn't find any solution on developer site. Is there any way I can display complete text instead of ..... ?

Answer 1

There are three ways to define a IconTabFilter to display text.
No Icon: Display long text
With Icon and Horiontal Design: Providing more space for texts,still show ... if text is very long.
With Icon and Vertical Design: Using minimum horizontal space.
Please check and run the code snippets to see different display effects.
sap.ui.controller("test.controller", {
});
var oView = sap.ui.xmlview({
viewContent: jQuery("#view1").html()
});
oView.placeAt("content");
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m"></script>
<script id="view1" type="sapui5/xmlview">
<mvc:View xmlns:l="sap.ui.layout" controllerName="test.controller" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:f="sap.ui.layout.form">
<l:VerticalLayout>
<IconTabBar>
<items>
<IconTabFilter text="Large text Large text">
<Text text="Large text Large text " />
</IconTabFilter>
<IconTabFilter text="Very Large text Very Large text Very Large text">
<Text text="Very Large text Very Large text " />
</IconTabFilter>
</items>
</IconTabBar>
<IconTabBar>
<items>
<IconTabFilter icon="sap-icon://hint" text="Large text Large text">
<Text text="Large text Large text " />
</IconTabFilter>
</items>
</IconTabBar>
<IconTabBar>
<items>
<IconTabFilter icon="sap-icon://attachment" design="Horizontal" text="Large text Large text">
<Text text="Large text Large text " />
</IconTabFilter>
</items>
</IconTabBar>
<IconTabBar>
<items>
<IconTabFilter icon="sap-icon://attachment" design="Horizontal" text="Very Large text Very Large text">
<Text text="Very Large text Very Large text " />
</IconTabFilter>
</items>
</IconTabBar>
</l:VerticalLayout>
</mvc:View>
</script>
<boy class="sapUiBody" id="content" />

Answer 2

The text of the IconTabFilter is showing ellipsis if you use it in combination with an icon.
It is possible to use only text, without icons, then there is no truncation at all.
If you use text and icon, the vertical design allows only very short text, the horizontal design allows longer text, but still after several characters the text will be truncated.
As the IconTabBar is a sap.m Control it is designed to run on mobile devices as well, therefore there is the truncation.
If you want to use Icons + Text you can also set the tooltip for the texts which are still too long.
And if you really want to have Icons + long text you can overwrite the css styles which are set to get this behaviour.
This would be the following rule:
.sapMITBFilter .sapMITBText {
width: 5rem;
overflow: hidden;
text-overflow: ellipsis;
}
But be aware that if you change the css there can be other issues and that the css can change in the future.