Elipses не добавляются в текст вкладок пользовательского интерфейса материала - PullRequest
Новая
       20

Elipses не добавляются в текст вкладок пользовательского интерфейса материала

1 голос
/ 31 марта 2020

Я новичок в веб-разработке. Здесь я пытаюсь добавить многоточие для элемента 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>

Теперь, здесь я пытаюсь добавить переполнение текста для этого текста span. Я применил следующее решение: 

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

Но все же я не могу добавить это. Может ли кто-нибудь помочь мне с этим?

1 Ответ

0 голосов
/ 31 марта 2020

Вот как это можно сделать: 

.VIP_tabIconWrapper { 
    overflow: hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    width:100px;
    display:inline-block;
}
  • Элемент должен быть inline-block
  • , вы должны предоставить width свойство
  • и у вас была опечатка на многоточии:)
...