如何使文本在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. sapMITBHorizo​​ntalWrapper（用于Wrapper Div）和
2. sapMITBHorizo​​ntal.sapMITBFilter> .sapMITBHorizo​​ntalWrapper> .sapMITBText（显示的文本的最大宽度）

这里，max-width设置为7.5rem，文本溢出设置为：省略号。

不知何故，它不可能向IconTabFilter添加一个类（坏）但你可以添加类到IconTabBar。所以，为了解决这个问题，我将最大宽度增加到10rem。您可以增加和减少最大宽度以满足您的要求。

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

如果文本太长，请考虑仅显示符合Fiori设计指南的文本：

如果标签被截断，请考虑使用较短的标签或文本标签（不带图标），因为文本标签不会被截断。 [source]

在内部，IconTabHeader（IconTabBar的标题控件）然后应用样式类sapMITBTextOnlysrc，不包括max-width.src

<IconTabBar>
  <items>
    <IconTabFilter text="products" count="20"/>
    <IconTabFilter text="jkjlsdfjalkfak awfgvbf uwewrw fwkjfv dqw qlkwejqwklejdifsuvnvxdlcmeq" count="4"/>
    <!-- ... -->
  </items>
</IconTabBar>

由于长度基本上是无限的，因此仍然建议确保文本不会变得太长。

Answer 3

试试下面

.sapMITBFilter .sapMITBText {
  width: 10rem;
}

.sapMITBTab {
  width: 10rem;
}