Javascript 使用引导显示通知计数器

我想实现一个通知计数器，它向上滚动以显示递增的数字。（就像google显示的带有google+通知的计数器一样）我无法让

溢出：隐藏

用于

。notif环绕

。它的子元素（有三个数字的元素）的高度更大，并且仍然可见。我希望它的适当部分是可见的。我该怎么做

html

---

在

.notif环绕
span
上设置
显示：内联块

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

问题在于，无法在设置为
显示：内联
的元素上设置溢出隐藏，这是
span
的默认值，因为无法设置其宽度和高度。设置
display:block
或
display:inline block
可修复此问题，第一个块在其自身后强制换行，而后一个块保持原始元素流不变。
但是，
inline block
起作用了。谢谢更新答案，我会接受
.notif-background{
    width:18px;
    height:14px;
}
#num_notif{
    position: relative;
    float: right;
    left: -38px;
    color: #fff;
    height:18px;
    
    bottom:20px;
}
.notif-surround{
    overflow:hidden;
}

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