Можно ли заставить "text-overflow: эллипсис" работать над текстом "navbar-brand" навигационной панели Bootstrap 3?

Я бы хотел использовать text-overflow: ellipsis в тексте .navbar-brand панели навигации Bootstrap 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, но я ищу способ сделать это, чтобы использовать максимально доступное пространство автоматически.

P.S.

CSS, который работает при добавлении к .navbar-brand, когда ширина жестко закодирована:

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

Ответ 1

Если вы установите ширину "навигационная марка": 100% свойство эллипса будет работать, и вы получите максимальное доступное пространство.

Ответ 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" происходит потому, что кнопка мобильного меню нуждается в этом месте.