省略未添加到材质 UI 选项卡文本中

Posted 2023-02-22

【中文标题】省略未添加到材质 UI 选项卡文本中

【英文标题】：Elipses not getting added to the material UI tabs text

【发布时间】：2020-07-11 13:22:08

【问题描述】：

我是网络开发的新手。在这里，我正在尝试为标签中的跨度元素添加省略号。

<div class="MuiTabs-scroller MuiTabs-fixed" role="tablist" style="overflow: hidden;">
   <div class="MuiTabs-flexContainer">
     <button class="MuiButtonBase-root MuiTab-root VIP_tabRoot MuiTab-textColorInherit Mui-selected VIP_tabSelected" tabindex="0" type="button" role="tab" aria-selected="true">
       <span class="MuiTab-wrapper VIP_tabIconWrapper">Test004</span>
    </button>
 </div>
</div>

现在，我在这里尝试为这个跨度文本添加文本溢出。我已经应用了以下解决方案，

.VIP_tabIconWrapper  
   max-width : 100px;
   text-overflow: elipses;
   word-wrap: no-wrap;
   white-space: nowrap;

但我仍然无法添加。谁能帮我解决这个问题？

【参考方案1】：

这是如何实现的：

.VIP_tabIconWrapper  
    overflow: hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    width:100px;
    display:inline-block;

元素必须是inline-block 您必须提供width 属性 你在省略号上有错字:)