css - 可以使“文本溢出：省略号”在 Bootstrap 3 导航栏的“导航栏品牌”文本上工作吗？

Question

我想在 Bootstrap 3 导航栏text-overflow: ellipsis的.navbar-brand文本上使用，这样在 iPhone 等设备上，文本会被截断，而不是导航栏在垂直大小上增长。

我也有两个按钮：

<nav class="navbar navbar-default navbar-fixed-top">
  <button type="button" class="btn btn-default navbar-btn navbar-left">Back</button>
  <a class="navbar-brand" href="#" >Branding text that can sometimes be too wide</a>
  <button type="button" class="btn btn-default navbar-btn navbar-right">Logout</button>
</nav>

如果我对宽度进行硬编码，则工作（同时设置）但text-overflow: ellipsis我white-space: nowrap正在寻找一种方法来完成此操作，以便自动使用最大可用空间。overflow: hidden.navbar-brand

附言

.navbar-brand将宽度添加到硬编码时起作用的 CSS ：

.ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

Answer 1

使用引导程序 4.3.1 在此处设置max-width帮助：

.navbar-brand {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 70%;
    max-width: calc(100% - 4em);
}

的calc“4em”是因为移动菜单按钮需要那个空间。

Answer 2

如果您设置“navbar-brand”宽度：100%，省略号属性仍然有效，您将获得最大可用空间。