溢出：隐藏为选项卡添加额外的填充/高度

Question

免责声明：我对 CSS 不是很熟悉。我正在使用溢出：隐藏来截断动态引导选项卡上的文本。创建第二个选项卡时，所有选项卡都会由于下方的填充而略微向上移动。我试图摆脱额外的填充，因为当所有元素都向上移动时会出现底部边框。我做了一些谷歌搜索，但使用垂直对齐底部或顶部并不能消除间隙。我不知道这是否与它有关，但是还有一个 margin-bottom: -1px 以隐藏底部边框以获得连接选项卡的效果。

我希望它看起来像没有溢出的样子：隐藏检查。

unwanted space with overflow hidden

with overflow hidden

with overflow hidden

without overflow hidden

<div class=container-fluid" id="dashboard">
    <ul class="nav nav-tabs" id="myTab" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#overall-statistics" role="tab" aria-controls="Overall Statistics"><span>Overall Statistics</span></a>
      </li>
    </ul>

    <div class="tab-content">
      <div class="tab-pane active" id="overall-statistics" role="tabpanel">
        <table>
          <tr>
              <td style="padding: 10px;">
                  View by 
              </td>
              <td style="padding: 10px;">
                    <select class="selectpicker" id="view-by" multiple title="Levels">
                      <option id="view-levels">Levels</option>
                      <option id="view-store-type">Store Type</option>
                    </select>
              </td>
          </tr>
        </table>
      </div>
      </div>
    <div class="tab-pane" id="messages" role="tabpanel">...</div>
    <div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>

.nav-tabs .nav-item {
margin-left: -1px;
width: 150px;
}

.nav-tabs .nav-link {
width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: bottom;
}

Answer 1

要消除多余的边框，您可能需要添加以下内容：

.nav-tabs .nav-link { border-bottom: none; }