在不换行的情况下创建 Bootstrap 3 Navbar 的最佳方法（并且不折叠）

Posted 2023-03-06

【中文标题】在不换行的情况下创建 Bootstrap 3 Navbar 的最佳方法（并且不折叠）

【英文标题】：Best way to create Bootstrap 3 Navbar without wrapping text (and no collapse)

【发布时间】：2013-12-21 12:55:29

【问题描述】：

我正在尝试使用 Bootstrap 3 创建一个不会折叠或换行文本的导航栏。我希望文本被简单地截断（或省略）而不是换行 - 所以导航栏保持在一行而不垂直扩展。 （此导航栏将用于通过单个右对齐菜单显示当前视图位置）

类似这样的：

<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 浮动、溢出、空白设置，但似乎无法获得正确的组合。此外，我使用两个导航栏标题元素来避免折叠，但如果有更好的方法，我愿意接受其他选择。

感谢您的帮助。

【问题讨论】：

两天前我做了这样的事情。看我的回答。

这不是 Bootstrap 的重大疏忽吗？

相关：Keep navbar items outside the collapse, Exclude menu item from the collapse

【参考方案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>  

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

【讨论】：

谢谢 - 这很好用。在看到您的 jsBin 链接 jsfiddle.net/Ender2050/h27SD/1 之前，我在 jsFiddle 中创建了它。

这是一个固定的位置，因为它没有实际的宽度，因为它绕过了正常的 css 东西。

使用第二个链接，它有一些较小的填充和较大的百分比。

【参考方案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-rightwidth:60px;

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

【参考方案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

【讨论】：

谢谢 - 但我试图让文本不像你显示的那样换行 - 所以它全部显示在单行导航栏上。

【参考方案4】：

看看 CSS3 属性 text-warp -> http://www.w3schools.com/cs-s-ref/css3_pr_text-wrap.asp

【讨论】：

谢谢，但我需要一个适用于现代浏览器的解决方案 - 正如该页面所述，“任何主要浏览器都不支持 text-wrap 属性。”