テキストをSAP UI5のアイコンタブバーに完全に表示させるにはどうすればよいですか？

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

テキストが原因のクラスに設定された2つのプロパティに半分にカットされます：

1. （ラッパー本部用）sapMITBHorizo​​ntalWrapperと
2. sapMITBHorizo​​ntal.sapMITBFilter> .sapMITBHorizo​​ntalWrapper> .sapMITBText（表示されたテキストのための最大幅）

ここで、max-widthは7.5remに設定され、text-overflowは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>