sapui5 - 如何使文本完全显示在 IconTabBar 中？

Question

我正在使用 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>

所以这里应该是“设置质量变化值”的文本输出为“设置质量值...”

Answer 1

由于类中设置了两个属性，文本被切成两半:

sapMITBHorizo​​ntalWrapper(用于 Wrapper Div)和

sapMITBHorizo​​ntal.sapMITBFilter>.sapMITBHorizo​​ntalWrapper>.sapMITBText(显示文本的最大宽度)

这里，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>