Show bootstrap notification counter

Question

I want to implement a notification counter that collapses to show the increased number. (Like one google show with Google + notifications), I can't get overflow:hidden to work for .notif-surround . The height of its child (with three numbers) is larger and is still visible. I want its corresponding part to be visible. How to do it?

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

Set display: inline-block to .notif-surround span .

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

The problem is that you cannot set the overflow of the hidden element set as display: inline , which is the default value for the span , since you cannot set its width and height. Setting display: block or display: inline-block fixes this when the first forced line break is in itself, and the last leaves the original stream of elements intact.