javascript - 使用 Bootstrap 显示通知计数器

Question

我想实现一个通知计数器，它会滚动以显示递增的数字。(就像谷歌显示的带有 google+ 通知的那个)我无法让 overflow:hidden 为 工作。通知环绕。它的子元素(具有三个数字的那个)的高度更大并且仍然可见。我希望它的适当部分可见。我该怎么做？

jsfiddle demo

html

<div id="top_navbar" class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="brand" href="/">Name</a>
      <div class="nav-collapse collapse">
        <ul class="nav">
          <li class="span6 offset1">
            <form class="navbar-form form-search">
              <div class="input-append">
                <input class="span4 search-query" type="text" placeholder="Search...">
                <button type="submit" class="btn">Search</button>
              </div>
            </form>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Home <span class="notif-surround"><span class="badge badge-info notif-background" >&nbsp;</span><span id="num_notif">0<br/>1<br/>2</span></span><b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li class="nav-header">Notifications</li>
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="nav-header">Messages</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
          <!-- <li><i class="icon-exclamation-sign icon-white"></i></li> -->
          <li class="dropdown">
            <img class="img-rounded img-profile inline" src="{{user['picture']['data']['url']}}" />
            <a href="#" class="dropdown-toggle profile-name" data-toggle="dropdown">{{user['name']}} <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="nav-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>

CSS

.notif-background{
    width:18px;
    height:14px;
}
#num_notif{
    position: relative;
    float: right;
    left: -38px;
    color: #fff;
    height:18px;
    
    bottom:20px;
}
.notif-surround{
    overflow:hidden;
}

Answer 1

在 .notif-surround span 上设置 display: inline-block。

.notif-surround{
  overflow:hidden;
  display: inline-block;
}

问题是您不能在设置为 display: inline 的元素上设置溢出隐藏，这是 span 的默认值，因为您可以' 设置它的宽度和高度。设置 display: block 或 display: inline-block 解决了这个问题，第一个强制换行，第二个保持元素的原始流不变。