How to use Ellipsis with Bootstrap menu?

Question

I created a horizontal menu with Bootstrap by following that example, but I have a problem when it is viewed on a device with very low resolution (most smartphones, except maybe the biggest ones): the title goes down to the bottom line and the button is on top. I would like you both to stay on the same line, and for the text to suffer Ellipsis if necessary.

Is it possible to do this only with CSS? The example of Ellipsis above assumes that the element has fixed size (I am using the Bootstrap fluid layout, however) and does not work with my code. My last feature 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.

Follow an example from this. View it in "Full Page", otherwise the problem will not be visible (because Stacksnippets uses a fixed-sized 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>
<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>

Answer 1

Maybe adjust the width max-width depending on the device, I have come across this problem, and for this case it 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>
<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>

Example Jsfiddle, due to be easier to resize the screen.