html – 创建Bootstrap 3 Navbar而不包装文本的最佳方法(并且没

发布时间：2020-12-14 16:43:15 所属栏目：资源来源：网络整理

导读：我正在尝试使用Bootstrap 3创建一个不会折叠或包装文本的Navbar.我希望文本只是被剪切(或省略)而不是包装 – 因此Navbar保持在一条线上而不会垂直扩展. (此Navbar将用于显示具有单个右对齐菜单的当前视图位置) 像这样的东西： div class="navbar navbar-fixe

我正在尝试使用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元素来避免崩溃,但如果有更好的方法,我会对其他选项持开放态度.

谢谢您的帮助.

解决方法

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>

必须在较小的宽度上摆弄百分比以允许菜单区域.在这个上做一个最小宽度,你会弄明白的.也许添加一些填充,以使其不掩盖.我将在今天或明天稍后看到这个问题.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!