2

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>

1 Resposta 1

3
+50

Talvez ajustar a largura max-width conforme o dispositivo, já me deparei com este problema, e para este caso foi suficiente, veja um exemplo:

.inline{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
@media (max-width: 768px) {
    .inline{
        max-width: 80%;    
    }
}
@media (max-width: 420px) {
    .inline{
        max-width: 70%;    
    }
}
<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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.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 inline">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>

Exemplo JSFiddle, devido ser mais fácil para redimensionar a tela.

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .