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

原创 2017年05月22日 19:07:30

先简单说明一下这里是指在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()
//就可以来回切换了
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

html 隐藏多余字段,显示省略号

把文本限制在一行(white-space: nowrap;),肯定这一行是有限制的(width),并且你的溢出的部分要隐藏起来(overflow: hidden;),然后出现省略号( text-ove...

实现textview最后一行只显示一半的效果

不知道大家有没有接到过这种需求,textview要求最大3行,并且最后一行只显示一半,以省略号结尾一开始觉得很蛋疼,一直没有好的思路,后来想到一种方案,就是用textview的paint可以计算出整个...

关于RecyclerView只显示一行数据的另类解决办法

不多说,先上问题表现图。可以看到,图里只显示了一行数据,实际上的数据却不止一行, 然后找到了RecyclerView只显示第一行的bug,自己的解决方案。这里的解决办法是: @Override ...

安卓开发——问题:ScrollView中嵌套ListView时,listview只显示一行

今天写项目时,遇到一个问题,自己给listview适配了好几条数据,可它打死就只显示一条,不管怎么改属性,怎么打log,就是发现不了问题在哪。 后来在网上才寻找到原因,tmd,竟然是ScrollVie...

scrollview + listview 只显示一行的解决办法

在开发的过程当中,由于手机屏幕的大小的限制,我们经常需要使用滑动的方式,来显示更多的内容。在最近的工作中,遇见一个需求,需要将ListView嵌套到ScrollView中显示。于是乎有了如下布局:  ...

Android ScrollView嵌套GridView导致GridView只显示一行item

Android ScrollView嵌套GridView导致GridView只显示一行itemAndroid ScrollView在嵌套GridView时候,会导致一个问题发生:GridView只显示...

日积月累:ScrollView嵌套ListView只显示一行

转载自:http://www.cnblogs.com/zhwl/p/3333585.html  郑文亮 在开发的过程当中,由于手机屏幕的大小的限制,我们经常需要使用滑动的方式,来显示...
  • Oops_Qu
  • Oops_Qu
  • 2016年01月15日 11:28
  • 219

ScrollView中嵌套GridView,ListView只显示一行的解决办法

关于为什么只显示一行,个人理解是:如果单独使用GridView和ListView,里面的内容是固定的,底层系统很容易计算出控件要占用的宽高,当外面嵌套一层ScrollView后,就能做上下或左右滑动,...
  • lyankj
  • lyankj
  • 2016年07月12日 17:01
  • 686

【Android---项目中】ScrollView中镶嵌ListView,ListView只显示一行的解决方案

今天写代码,在ScrollView里边嵌套了个ListView,里面还有其他布局,后边就发现数据源里好多数据,但ListView只是显示1行,布局如下: ...
  • tablle
  • tablle
  • 2016年06月24日 10:48
  • 448

ScrollView嵌套ListView只显示一行

ScrollView里面嵌套ListView会出现只显示一行的情况
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html非文本只显示一行,多余隐藏的实现
举报原因:
原因补充:

(最多只允许输入30个字)