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也会设置），但我正在寻找一种方法来实现这一目标这样就可以自动使用最大可用空间。

P.S。

当宽度为硬编码时添加到.navbar-brand时有效的CSS：

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

Answer 1

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

Answer 2

设置max-width可以帮助使用引导程序4.3.1：

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

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

可以使用“文本溢出：省略号”来处理Bootstrap 3导航栏的“navbar-brand”文本吗？

2 个答案: