如何使文本完全显示在SAP UI5的图标选项卡栏中？

我在我的应用程序中使用IconTabBar，文本（标题标题）未完全显示，文本的一半被剪切。如何使文本完全显示在SAP UI5的图标选项卡栏中？

`<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>`

所以这里应该来像“设置值，质量变化”一文谈到像“为群众设置值。”

来源

2017-01-02 sourabh7

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

sapMITBHorizontalWrapper（用于包装DIV）和
sapMITBHorizontal.sapMITBFilter> .sapMITBHorizontalWrapper> .sapMITBText（最大宽度为所显示的文本）

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

不知何故，它不可能添加一个类到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>

来源

2017-01-02 10:54:41

感谢您的快速回复。现在，它工作完美。 – sourabh7

如何使文本完全显示在SAP UI5的图标选项卡栏中？

回答

相关问题