如何使文本在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

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

1. sapMITBHorizontalWrapper (用于包装器分区)和
2. sapMITBHorizontal.sapMITBFilter>.sapMITBHorizontalWrapper>.sapMITBText (显示文本的最大宽度)

在这里，最大宽度设置为7.5rem，文本溢出设置为:省略。

不知何故，向IconTabFilter添加类是不可能的(糟糕)，但是可以将类添加到IconTabBar中。因此，为了解决这个问题，我增加了最大宽度到10雷姆。您可以增加和减少最大宽度，以满足您的要求.

下面是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>

Answer 2

试着在下面

.sapMITBFilter .sapMITBText {
  width: 10rem;
}

.sapMITBTab {
  width: 10rem;
}