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

Question

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

<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;
}

但我仍然无法添加。谁能帮我这个？

Answer 1

这是如何实现的：

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

• 元素必须是inline-block
• 您必须提供width财产
• 你在省略号上有一个错字:)