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

【问题标题】：Elipses not getting added to the material UI tabs text省略未添加到材质 UI 选项卡文本中
【发布时间】：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;
}

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

【问题讨论】：

标签： css reactjs material-ui react-material

【解决方案1】：

这是如何实现的：

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

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

【讨论】：