如何在Bootstrap 3选项卡上出现文本溢出？

Question

我想改变＆＃34;音量＆＃34;标签进入＆＃34; volum ...＆＃34;当它越过屏幕时。

这是我的代码。

<div>
<ul class="nav nav-tabs" style="display:flex;flex-direction:row;">
  <li class="active" style="flex:1;"><a data-toggle="tab" href="#client" style="text-align:center;">client</a></li>
  <li style="flex:1;"><a data-toggle="tab" href="#face" style="text-align:center;">face</a></li>
  <li style="flex:1;"><a data-toggle="tab" href="#pitch" style="text-align:center;">pitch</a></li>
  <li style="flex:1;"><a data-toggle="tab" href="#presence" style="text-align:center;">presence</a></li>
  <li style="flex:1;"><a data-toggle="tab" href="#volume" style="text-align:center;">volume</a></li>
</ul>
</div>

我试图添加这些CSS但没有效果，它保持不变。

.nav-tabs > li > a {
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 10em;
}

我试图为每个父母明确添加width:100%; /设置宽度，但也没有效果。

Answer 1

您需要overflow: hidden; display: block;（或inline-block也可以使用）

.nav-tabs > li > a {
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 2em;
  overflow: hidden;
  display: block;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div>
<ul class="nav nav-tabs" style="display:flex;flex-direction:row;">
  <li class="active" style="flex:1;"><a data-toggle="tab" href="#client" style="text-align:center;">client</a></li>
  <li style="flex:1;"><a data-toggle="tab" href="#face" style="text-align:center;">face</a></li>
  <li style="flex:1;"><a data-toggle="tab" href="#pitch" style="text-align:center;">pitch</a></li>
  <li style="flex:1;"><a data-toggle="tab" href="#presence" style="text-align:center;">presence</a></li>
  <li style="flex:1;"><a data-toggle="tab" href="#volume" style="text-align:center;">volume</a></li>
</ul>
</div>