Question

当导航栏组件都有很长的文本时，我遇到了问题。会发生什么是导航栏垂直扩展并与网站内容重叠。

我希望导航栏不会展开，而是隐藏内容的溢出。

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>    
    <p class="navbar-brand">Brand Title</p>
  </div>  
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li><a href="#">Looooooooonnnnnngggg Text</a></li>
        <li><a href="#about">Longggggggggggggggggggg Text</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#about">Loooong Text</a></li>
      <li><a href="#contact">LongText</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
        <li><a href="#about">Reallyyyyyyyyyyyyyyyyy  Looooooooooooooooooooonnnnnnnnngggg Text</a></li>

    </ul>
  </div>
  </div>

Answer 1

您可以使用a代码的固定宽度来解决此问题。

ul li a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100px;
}

结果：http://jsfiddle.net/j47cn28u/

Answer 2

@media (min-width: 768px) {
    nav.navbar { 
        max-height: 60px;
        overflow: hidden;
    }
}

<强> Demo

Bootstrap CSS Navbar溢出

2 个答案: