我正在使用 IconTabBar在我的应用程序中,文本(标题为选项卡)未完全显示。一半的文字被剪掉了。
<IconTabBar class="sapUiResponsiveContentPadding">
<items>
<IconTabFilter
icon="sap-icon://approvals"
text="Set Values for Mass Change" design="Horizontal"
>
<mvc:XMLView viewName="abc.view.selectionPage"/>
</IconTabFilter>
<IconTabSeparator icon="sap-icon://open-command-field"/>
</items>
</IconTabBar>
所以这里应该是“设置质量变化值”的文本输出为“设置质量值...”
最佳答案
由于类中设置了两个属性,文本被切成两半:
这里,max-width 设置为 7.5rem,text-overflow 设置为 :ellipsis。
不知何故,不可能将类添加到 IconTabFilter(坏),但您可以将类添加到 IconTabBar。所以,为了解决这个问题,我将最大宽度增加到 10rem。您可以增加和减少 max-width 以满足您的要求。
下面是css代码:
.myWidth .sapMITBHorizontalWrapper {
max-width: 10rem;
}
.myWidth .sapMITBHorizontal.sapMITBFilter>.sapMITBHorizontalWrapper>.sapMITBText {
max-width: 10rem;
}
看法:
<IconTabBar class="sapUiResponsiveContentPadding myWidth">
<items>
<IconTabFilter id='myId' icon="sap-icon://approvals" class='' text="Set Values for Mass Change" design="Horizontal">
<!-- <mvc:XMLView viewName="abc.view.selectionPage"/> -->
</IconTabFilter>
<IconTabSeparator icon="sap-icon://open-command-field"/>
<IconTabFilter icon="sap-icon://approvals" class='' text="Short Text" design="Horizontal">
<!-- <mvc:XMLView viewName="abc.view.selectionPage"/> -->
</IconTabFilter>
<IconTabFilter icon="sap-icon://approvals" class='' text="Shorter" design="Horizontal">
<!-- <mvc:XMLView viewName="abc.view.selectionPage"/> -->
</IconTabFilter>
<IconTabFilter icon="sap-icon://approvals" class='' text="This is a Big text." design="Horizontal">
<!-- <mvc:XMLView viewName="abc.view.selectionPage"/> -->
</IconTabFilter>
<IconTabFilter icon="sap-icon://approvals" class='' text="Lil" design="Horizontal">
<!-- <mvc:XMLView viewName="abc.view.selectionPage"/> -->
</IconTabFilter>
</items>
</IconTabBar>
关于sapui5 - 如何使文本完全显示在 IconTabBar 中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41423601/