css - Bootstrap CSS 导航栏溢出

标签 css twitter-bootstrap navbar

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

我不希望导航栏展开,而是 overflow hidden 的内容。

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

最佳答案

您可以通过为 a 标签使用固定宽度来解决它。

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

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

关于css - Bootstrap CSS 导航栏溢出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28734727/

相关文章:

javascript - 如何仅在用户开始向下滚动后才显示标题? [ react ]

python - 如何让我的用户将歌曲添加到 django 中的专辑中

javascript - Bootstrap 双日期选择器值解析

javascript - 识别 Javascript 中的 html 数据属性

javascript - 将表单放置在 <ul> 元素旁边

html - 如何 float Bootstrap 导航栏并让它只从第二部分向下显示? (包括示例)

html - 使用 flex-grow 使卡片在调整大小时拉伸(stretch)后,如果最后一行的卡片数量少于其他行,则 flex 卡的宽度会拉伸(stretch)

javascript - addEventListener 无故激活?

html - 导航栏未在 Bootstrap Material 中扩展

html - Bootstrap 汉堡图标不可见