设置超过DIV高度范围隐藏结尾... 点击查看全文显示全部

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>文字超出长度用省略号显示,点击显示全文</title>
</head>
<body>
<button>显示全文</button>
<div class="accord">
这是超出部分隐藏的测试文本这是超出部分隐藏的测试文本这是超出部分隐藏的测试文本这是超出部分隐藏的
测试文本这是超出部分隐藏的测试文本这是超出部分隐藏的测试文本这是超出部分隐藏的测试文本这是超出部分
隐藏的测试文本这是超出部分隐藏的测试文本这是超出部分隐藏的测试文本这是超出部分隐藏的测试文本     这是超出部分隐藏的测试文本这是超出部分隐藏的测试文本这是超出部分隐藏的测试文本这是超出部分隐藏的测试
文本这是超出部分隐藏的测试文本这是超出部分隐藏的测试文本这是超出部分隐藏的测试文本这是超出部分隐藏的测
试文本这是超出部分隐藏的测试文本这是超出部分隐藏的测试文本这是超出部分隐藏的测试文本</div>
</body>
</html>

要求一: div随便设置 ,只显示五行,超过范围结尾显示...

要求二: 显示全文按钮, 点击能够取消隐藏字段设置,显示全文

要求三: 尽量不用javascript, 用css样式

设置超过DIV高度范围隐藏结尾... 点击查看全文显示全部相关推荐

html如何设置展开全文,Js实现点击查看全文(纯手工代码)
移动端demo 需要设置过最大高度max-height,然后把超出部分隐藏. 判断内容是否超出指定高度,超出就添加,"展开全文"的按钮. 添加按钮点击事件,点击后展开全文. 点击查 ...
html隐藏文字点击查看更多,js 文字超出部分隐藏、点击显示更多示例
感兴趣js 文字超出部分隐藏.点击显示更多示例的小伙伴,下面一起跟随编程之家 jb51.cc的小编来看看吧. css: *{ padding: 0; margin: 0; } .text-hide{ ...
CSS 设置超过一定高度后出现滚动条
.test {max-height: 500px,overflow-y: auto }
原生js设置div隐藏或者显示_JavaScript动画方式控制div元素的隐藏和显示
jQuery实现此功能相对比较简单,具体参阅点击按钮动画方式隐藏和显示div一章节. 结合CSS3实现此功能也非常便利和适合,具体参阅JavaScript与CSS3动画方式改变元素尺寸一章节. 原生J ...
html给div设置宽度无效,HTML学习之给div高度设置百分比不生效的问题
这几天在学习HTML的知识,今天想做一个极为简单的页面,就是分为头部,内容和底部,本来用三个div即可,可是给div高度设置百分比时发现不生效,具体页面如下,非常简单. 下面是html部分: 1111 ...
html中js隐藏div的高度,jQuery实现获取隐藏div高度的方法示例
jQuery实现获取隐藏div高度的方法示例发布时间:2020-09-22 19:27:55 来源:脚本之家阅读:95 作者:zhuyangxing 本文实例讲述了jQuery实现获取隐藏div高 ...
CSS设置div高度自适应
通过CSS实现Div高度自适应: 问: 在一个DIV中有多个未知高度的子元素DIV,怎样通过CSS实现子元素div同高或怎样实现同行div按照内容最多的那个设置高度. 如图: 实现1:添加表格特性 ...
js设置div高度低于滚动高度时固定
今天在电脑端看csdn时,发现文章界面一般分为三大块:左边侧边栏显示用户基本信息和广告.中间文章部分.右边用户的文章专栏.整体用的是float.右边的文章position设置为fixed.左边侧边栏是 ...
HTML变列自适应布局三行,CSS三行三列DIV高度自适应的设置
上一篇博客里引用了www.52css.com里的一篇关于使用脚本控制三行三列div高度自适应的设置方法,其实不必如此麻烦,只要给父div设置一个固定高度,比如10px,其子div的height:100 ...

设置超过DIV高度范围隐藏结尾... 点击查看全文显示全部

设置超过DIV高度范围隐藏结尾... 点击查看全文显示全部相关推荐

最新文章

热门文章