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

Question

我想text-overflow: ellipsis在.navbar-brandBootstrap 3导航栏的文本上使用,以便在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,但我正在寻找一种方式,以便最大可用空间用来自动完成此任务.

PS

添加到.navbar-brand宽度为硬编码时的CSS :

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

Answer 1

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