Can "text-overflow: ellipsis" be made to work on the "navbar-brand" text of a Bootstrap 3 navbar?

Question

I'd like to use text-overflow: ellipsis on the .navbar-brand text of a Bootstrap 3 navbar so that on devices like an iPhone the text is truncated rather than the navbar growing in vertical size.

I have two buttons as well:

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

The text-overflow: ellipsis works (with white-space: nowrap and overflow: hidden also set) if I hard-code the width of the .navbar-brand but I am looking for a way to accomplish this so that the maximum available space is used automatically.

P.S.

The CSS that works when added to the .navbar-brand when a width is hard coded:

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

Answer 1

Setting a max-width helped here with bootstrap 4.3.1:

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

The calc's "4em" is because the mobile menu button needs that space.

Answer 2

If you set "navbar-brand" width: 100% the ellipsis property will still work and you will get the maximum available space.