创建Bootstrap 3 Navbar而不包装文本的最佳方法（并且不会崩溃）

Question

我正在尝试创建一个带有Bootstrap 3的Navbar，不会折叠或包装文本。我希望简单地将文本剪切（或省略）而不是包装 - 因此Navbar保持在一条线上而不会垂直扩展。 （此Navbar将用于通过单个右对齐菜单显示当前视图位置）

这样的事情：

<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>

如图所示，我一直在愚弄CSS浮动，溢出，空白设置，似乎无法获得正确的组合。另外，我使用两个navbar-header元素来避免崩溃，但如果有更好的方法，我会对其他选项持开放态度。

感谢您的帮助。

Answer 1

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

这是一个效果很好的固定版本：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>  

必须调整较小宽度的百分比以允许菜单区域。在这个上做一个最小宽度，你会弄明白的。也许添加一些填充，以使其不掩盖。我将在今天或明天晚些时候看到这个。

Answer 2

如果你允许javascript / jquery;将溢出标头添加到.pull-left div中; <div class="navbar-header pull-left" style="overflow: hidden;">

并使用此：

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

请参阅：http://bootply.com/98610 请注意，您必须使用此解决方案重新计算屏幕尺寸更改。

如果您可以为右侧导航设置固定宽度并允许ccs3，则可以执行以下操作：

.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;}

另见：https://stackoverflow.com/a/14101451/1596547

Answer 3

删除.navbar-text内联CSS，然后使用white-space: normal：

<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

Answer 4

看看CSS3属性text-warp - ＆gt; http://www.w3schools.com/cssref/css3_pr_text-wrap.asp