How to use ellipsis with Bootstrap menu?

Question

How to use ellipsis with Bootstrap menu?

Navigation

#1 by (3 votes)

2

I created a horizontal menu with Bootstrap, following this example , but I have a problem when it is viewed on a device with very low resolution (most smartphones , except perhaps the largest): the title goes down to the bottom line and the button stays on top. I would like both to always be on the same line, and the text would suffer ellipsis if necessary.

Is it possible to do this with CSS only? The example ellipsis above assumes that the element has a fixed size (I'm using Bootstrap fluid layout, though) and does not work with my code. My last resort would be to use a fixed size, and put a JavaScript code to update its width whenever the page was resized, but I'm looking for a simpler solution.

Here's an example. You can see it in "Whole Page" otherwise the problem will not be visible (because StackSnippets uses a fixed size area, and the problem only occurs when the window width is too small):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><linkhref="//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>

css twitter-bootstrap menu

asked by anonymous 15.03.2015 / 20:48

1 answer

Exchanging Entity Framework EDMX by Code First JSAngular Multiple ng-repeat

score 3 · Accepted Answer

Maybe adjust the width max-width according to the device, I've already encountered this problem, and for this case was enough, see an example:

.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><navrole="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>

Example JSFiddle , because it is easier to resize the screen.