Best way to create Bootstrap 3 Navbar without wrapping text (and no collapse)

Question

I'm trying to create a Navbar with Bootstrap 3 that doesn't collapse or wrap the text. I'd like the text to simply be cut off (or ellipses) instead of wrapping - so the Navbar remains on a single line without expanding vertically. (this Navbar will be used to display the current view location with a single right-aligned menu)

Something like this:

<div class="navbar navbar-fixed-top navbar-inverse">

    <div class="navbar-header pull-left">
        <p class="navbar-text" style="overflow: hidden; white-space: nowrap;">
            Trying to get this long line of text to not wrap even if too wide for the view to display. Trying to get this long line of text to not wrap even if too wide for the view to display.
        </p>
    </div>

    <div class="navbar-header pull-right">
        <p class="navbar-text">Menu</p>
    </div>

</div>

As shown, I've been fooling with CSS float, overflow, whitespace settings and can't seem to get the right combination. Also, I'm using two navbar-header elements to avoid collapsing, but I'm open to other options if there is a better way.

Thanks for the help.

Related: [Keep navbar items outside the collapse](http://stackoverflow.com/questions/18761633/bootstrap-3-keep-navbar-items-outside-the-collapse-without-wrapping-to-a-new-li), [Exclude menu item from the collapse](http://stackoverflow.com/questions/21037833/exclude-menu-item-from-the-collapse-of-bootstrap-3-navbar) — Dan Dascalescu, Jun 28 '14 at 02:28

Christina · Accepted Answer · 2013-12-04T21:51:40.837

http://jsbin.com/elezawA/1/

Here's a fixed version that works great: http://jsbin.com/elezawA/2

 body {
 padding-top: 50px;
}

.overflow {
  position:absolute;
  top:0;
  left:0;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin-top: 0;
  color:#ccc;
  max-width:90%;
}

  .overflow p {color:#ccc;line-height:50px;padding:0 10px;margin:0;display:inline;}


 <div class="navbar navbar-fixed-top navbar-inverse">

    <div class="navbar-header">
      <span class="overflow">
       <p>
        Trying to get this long line of text to not wrap even if too wide for the view to display. Trying to get this long line of text to not wrap even if too wide for the view to display.
         </p> 
     </span>
   </div>

   <div class="navbar-header pull-right">
       <p class="navbar-text">Menu</p>
    </div>

 </div>

Going to have to fiddle with the percentage on the smaller widths to allow for the menu area. Do a min-width on this one and you'll figure it out. Perhaps add some padding to get it to not cover up. I will see later on today or tomorrow about this.

Thank you - this works great. I created it in jsFiddle before I saw your jsBin link http://jsfiddle.net/Ender2050/h27SD/1/. — Ender2050, Dec 04 '13 at 21:53
It's that fixed position that will get you since there's not actual width on it since it bypasses the normal css stuff. — Christina, Dec 04 '13 at 21:59
use the second link, it has some padding for smaller and a percentage for larger. — Christina, Dec 04 '13 at 22:00

score 2 · Answer 2 · edited May 23 '17 at 11:59

If you allow javascript / jquery; add the overflow header to your .pull-left div too; <div class="navbar-header pull-left" style="overflow: hidden;">

and use this:

$(function() {
  $('.pull-left').css('max-width', ($( window ).width() - $('.pull-right').width()) + 'px');
});

See: http://bootply.com/98610 Note you will have to do recalculation on screen size changes using this solution.

If you could give your right nav a fixed width and allow ccs3 required you can do the same with:

.pull-left  
{   
/* Firefox */
max-width: -moz-calc(100% - 60px);
/* WebKit */
max-width: -webkit-calc(100% - 60px);
/* Opera */
max-width: -o-calc(100% - 60px);
/* Standard */
max-width: calc(100% - 60px);
}
.pull-right{width:60px;}

Also see: https://stackoverflow.com/a/14101451/1596547

score 1 · Answer 3 · answered Dec 04 '13 at 21:05

Remove .navbar-text inline CSS, and use white-space: normal :

enter image description here

<div class="navbar navbar-fixed-top navbar-inverse">

    <div class="navbar-header pull-left">
        <p class="navbar-text">
            Trying to get this long line of text to not wrap even if too wide for the view to display. Trying to get this long line of text to not wrap even if too wide for the view to display.
        </p>
    </div>

    <div class="navbar-header pull-right">
        <p class="navbar-text">Menu</p>
    </div>

</div>

.navbar-text {
    margin-right: 15px;
    margin-left: 15px;
    white-space: normal
}

Bootply

Thank you - but I'm trying to get the text to NOT wrap as you've shown - so it appears all on a one-line Navbar. — Ender2050, Dec 04 '13 at 21:09

score 0 · Answer 4 · answered Dec 04 '13 at 20:47

0

Take a look at the CSS3 property text-warp -> http://www.w3schools.com/cssref/css3_pr_text-wrap.asp

answered Dec 04 '13 at 20:47

Lukas Eichler

5,689
1
24
43

1

Thanks, but I need a solution that works in modern browsers - and as that page mentions, "The text-wrap property is not supported in any of the major browsers." – Ender2050 Dec 04 '13 at 20:52

Best way to create Bootstrap 3 Navbar without wrapping text (and no collapse)

4 Answers4