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()//就可以来回切换了