Criei um menu horizontal com o Bootstrap, seguindo esse exemplo, mas estou com um problema quando o mesmo é visualizado num dispositivo com resolução muito reduzida (a maioria dos smartphones, exceto talvez os maiores): o título desce para a linha de baixo e o botão fica em cima. Eu gostaria que ambos ficassem sempre na mesma linha, e que o texto sofresse ellipsis caso necessário.
É possível fazer isso somente com CSS? O exemplo de ellipsis acima assume que o elemento possui tamanho fixo (estou usando o leiaute fluido do Bootstrap, entretanto) e não funciona com o meu código. Meu último recurso seria usar um tamanho fixo, e colocar um código JavaScript para atualizar sua largura sempre que a página fosse redimensionada, mas estou à procura de uma solução mais simples.
Segue um exemplo. Visualize-o em "Página toda", caso contrário o problema não ficará visível (pois o StackSnippets usa uma área de tamanho fixo, e o problema só ocorre quando a largura da janela é muito pequena):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<nav role="navigation" class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand visible-xs-block">Teste teste teste teste teste teste teste teste teste</a>
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
...
</div>
</nav>