Я бы хотел использовать 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;
}