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 块级元素和行内元素

块级元素和行内元素的区别 1、从视觉上区分:该元素是否独占一行,独占一行的意思是,在水平方向上只有该元素的内容 如果一个元素独占一行(比如,div元素),那么该元素就是块级元素;如果不是独占一行(比如...
  • B_qxzb
  • B_qxzb
  • 2015年11月11日 15:18
  • 2058

html中空元素的写法问题

学了xml后,对空元素总喜欢用“”来表示,而不喜欢用“”,因为前者更简洁。这种习惯随之带到了html中。     不过,在html中,这样写空元素,却不能总是保证正常运行。在html中,有些空元素是...
  • aabout01
  • aabout01
  • 2014年06月13日 20:02
  • 790

html+css快速入门教程

前端工程师应该掌握的基本技术:HTML+CSS+JavaScript1 HTML简介1.1. 什么是HTML?(了解)HTML是超文本标记语言(HyperText Markup Language,HT...
  • keledon
  • keledon
  • 2017年06月07日 19:09
  • 618

HTML之position:absolute relative static fixed的区别和理解

HTML之position:absolute relative static fixed的区别 在理解position:absolute relative static fixed的区别时,我们先需...
  • guyuealian
  • guyuealian
  • 2016年02月24日 18:58
  • 3551

html 中限制一行的字数

自己的理解:对于一行,1复制.dd的样式,2在div或者span中直接给class负上dd 3,对.dd修改,添加display:block;(div不需要,span要)overflow:hidden...
  • u012820258
  • u012820258
  • 2015年01月16日 16:27
  • 5922

html单行文本两端对齐

昨晚,在群中看到有人问如何让单行文本的内容两端对齐?还发了张图片,原来他是想让很多input域的左侧标签文字能对齐。 由于刚接触web,第一感觉就是不是有现成的CSS属性:text-align=ju...
  • HOOKTTG
  • HOOKTTG
  • 2015年02月07日 15:06
  • 2228

Head First HTML & CSS chapter 11 :高级网站构建div与span,页面布局

1、所谓文档流是浏览器放元素的顺序,若是块级元素,会在元素末尾加一个换行符,在下一行加载下一个元素;若是内联元素则会按照左上右下的一行一行的放入流中。 2、position的默认是是stat...
  • py_tamir
  • py_tamir
  • 2018年01月13日 21:59
  • 372

WEB前端学习 Day4(定位)

一个元素,如何让它摆在自己想要的位置。就需要弄透CSS的定位相关的属性。 首先,一个元素默认是按照文档流进行布局的,比如说三个DIV,它默认会占用三行,三个SPAN,它默认占用一行,当这一行...
  • sdanfy
  • sdanfy
  • 2015年11月04日 12:37
  • 221

html表格嵌套表格隐藏与显示 跨行显示

jsp页面 /js/jquery-1.6.4.min.js" type="text/javascript" > /skin/color1/images/company/fav...
  • yongzhian
  • yongzhian
  • 2014年08月18日 14:10
  • 1363

html表格 <td> 文字过多需要隐藏的正确方法

表格中文字过多需要隐藏文字 正确的做法 一.强制文字不换行,并隐藏多余部分 CSS 代码 div{width:100px;overflow:hidden;white-spa...
  • h330531987
  • h330531987
  • 2017年05月04日 23:03
  • 1672
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html非文本只显示一行,多余隐藏的实现
举报原因:
原因补充:

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