html非文本只显示一行,多余隐藏的实现

先简单说明一下这里是指在HTML的span button 等其他行内元素,多于一行时会自动换行,但是有时候只需要显示一行,多余 隐藏该如何实现.

假设body里面的代码如下所示
<div class="btn-list">
<button>111111111111111111</button>
<button>111111111111111111</button>
<button>111111111111111111</button>
<button>111111111111111111</button>
<button>111111111111111111</button>
........
</div>  
那么如何只显示一行,而多余的隐藏呢?
由于btn-list 是被子元素按钮所撑开的,所以他的高度就等于子元素行数乘以行高
那么只需要获取按钮的高度,如果父元素大于子元素2倍的高度,认定为有一行以上

var listH =$(".btn-list").height();
while( listH>$(".btn-list button").height()*2){
//影藏最后一个btn,循环,这样就实现了
$(".btn-list button:visible").last().hide();
}
//自然想要展示所有btn  直接 $(".btn-list button").show()
//就可以来回切换了