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

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

sapMITBHorizontalWrapper（用于Wrapper Div）和
sapMITBHorizontal.sapMITBFilter＆gt; .sapMITBHorizontalWrapper＆gt; .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的标题控件）然后应用样式类sapMITBTextOnly ^src，排除< / strong> 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;
}

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

3 个答案: