html - 你怎么能让 Bootstrap 3 选项卡上的文本溢出？

Question

当它越过屏幕时，我想将“音量”选项卡更改为“音量...”。

这是我的代码。

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

我已经尝试为每个 parent 显式添加 width:100%;/set width 但也没有效果。

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>