Force Bootstrap Nav-Brand для переполнения

Question

У меня возникли проблемы с навигационной панелью Bootstrap с ASP.NET mvc. В моем файле макета у меня есть строка вроде этого: <div class="navbar-brand">This is a very long string I want to go in the title.</div>. Моя проблема в том, что, когда экран становится слишком узким, чтобы текст вписывался в одну строку, я бы хотел, чтобы он использовал многоточие вместо того, чтобы переносить на следующую строку. Я попробовал css, например:

.navbar-brand { 
    text-overflow: ellipsis; 
    text-wrap:none; 
} 

не имеет никакого эффекта. Как я могу это достичь?

Answer 1

Попробуйте этот код, вы должны определить ширину, чтобы все работало и установили overflow: hidden + white-space: nowrap. Fiddle

.navbar-brand{ 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    overflow: hidden; 
    width:100%; 
}