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()
//就可以来回切换了
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_29594393/article/details/72629109
文章标签: html
个人分类: js
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

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

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭