前端页面 div+css内容太长，实现点击展开余下全文（修改版）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文章高度展开</title>
<style>
.content{padding:10px 12px 48px;font-size:18px;color:#2b2b2b;line-height:1.7em;height:300px;        /*初始要显示的高度*/overflow:hidden;    /*关键样式：内容会被修剪，并且其余内容是不可见的。*/position:relative
}
.content div{           /*获取更多内容图标div*/clear:both;min-height:1em;white-space:pre-wrap; /*如何处理元素内的空白*/
}
.get_ct_more {height:78px;position:absolute;bottom:0px;width:100%;background:linear-gradient(to top,#fff,rgba(255,255,255,0) 70%);margin:0px;margin-right:10px
}
.more_bt {width:16px;height:16px;margin-left:36%;margin-bottom:-10px
}
</style>
</head>
<body>
<div id="content" class="content">
<p>9月8日，吴小姐一家和朋友去西溪印象城吃饭，找了个吃火锅的餐馆坐下桌子靠着木制隔断墙，
吴小姐将11个月大的孩子放在最里面的位置，心想靠着隔断墙，这样安全点</p>
<p>吴小姐先把孩子喂饱，然后随他自己在位子上玩快吃完时，吴小姐突然发现孩子嘴边有淡黄色粉末状物体，还在砸吧着嘴巴</p>
<p>品尝味道
我没给他喂过这东西啊吴小姐大脑立马一阵搜索，看孩子手上也有类似粉状，再放眼一看，餐桌侧边的隔断墙缝里，
有一小堆淡黄色粉末，像佐料像木屑
我一开始以为是木屑，后来才发现不是就算是那个时候，吴小姐也没想到这黄色粉末是杀蟑螂的药粉</p>
<p>吴小姐叫来了服务员问：这是什么东西，我想知道我孩子吃了什么？
服务员警觉地啊了一声，接着让吴小姐稍等一下，他说要去问店长，他也不知道是什么东西
服务员的这一声啊，让吴小姐及朋友非常紧张</p>
<p>孩子吃下去的黄色粉末是杀虫剂
当晚就进了抢救室
等不及店长的回复，吴小姐带着孩子赶到省儿童医院一到医院，孩子马上被送到抢救室</p>
<p>医生问孩子吃了什么？
吴小姐说，不知道她拿出从现场取的一点粉末让医生看，但医生无法辨别，他说必须尽快知道这种东西的属性才能治疗
9月8日晚上9点多，吴小姐收到了店长发来的图片，称这是一种杀虫饵剂，用来防止蜚蠊蚂蚁，有效成分及含量是：乙酰甲胺磷/acephate 1.5%</p>
<p>医生看了图片后说，孩子要洗胃
11个月大的孩子就要洗胃，吴小姐跟老公发生了争执：我老公觉得11个月大的孩子不应该承受这种痛苦，但对我来说，我是一个母亲，
如果我们不洗胃了，我不知道第二天会怎么样，我不敢冒这个险</p>
<p>吴小姐说她虽然无法确切说出乙酰甲胺磷是什么，但是甲胺磷她还是听说过的：那是一种农药啊，有毒的啊
最后吴小姐坚持洗胃，四个大人一边哭一边按着孩子，配合医生给孩子洗胃</p>
<p>现在三天过去了，所幸孩子目前没有出现其余症状，已出院回家</p>
<div id="get_ct_more" class="get_ct_more"><img src='more.png' class="more_bt" id="more_bt">
</div>
</div>
<script>
var btn = document.getElementById('get_ct_more');
var obj = document.getElementById('content');var total_height = obj.scrollHeight;//文章总高度var show_height  = 300;//定义原始显示高度if(total_height>show_height){btn.style.display = 'block';btn.onclick = function(){obj.style.height = total_height + 'px';btn.style.display = 'none';}}var t1=window.setInterval(refreshCount, 500);        //动态按钮var more_img = document.getElementById("more_bt");var first_one = 0;function refreshCount() {if(first_one == 0){more_img.style.marginBottom='-5px';first_one=1;}else{more_img.style.marginBottom='-10px';first_one=0;}}
</script>
</body>
</html>

前端页面 div+css内容太长，实现点击展开余下全文（修改版）相关推荐

html实现展开余下全文多个,DIV+css内容太长，怎么实现点击展开余下全文？
文章高度展开 #myarticle{ width:700px; height:300px; overflow-y:hidden; border:1px solid green; margin:20px ...
html实现展开余下全文多个,DIV+css内容太长，实现点击展开余下全文
文章高度展开 }.get_ct_more{height:78px;position:absolute;bottom:0px;width:100%;background:linear-gradient( ...
前端之DIV+CSS布局
刚开始学习javaweb,首先定位学习后端,可是随着学习的深入和项目的进行,越来越发现前端知识的欠缺,之前也随着视频看过,随着时间的流逝,具体的应用也随之忘记了. 而现在开始自己练习项目,发现前端知识 ...
datatable行内内容太长，有时不自动换行解决方法
datatable行内内容太长,有时不自动换行解决方法参考文章: (1)datatable行内内容太长,有时不自动换行解决方法 (2)https://www.cnblogs.com/yang-xia ...
css内容过长显示省略号的几种解决方法
css内容过长显示省略号的几种解决方法参考文章: (1)css内容过长显示省略号的几种解决方法 (2)https://www.cnblogs.com/sinceForever/p/11350332. ...
LaTeX 表格里的内容太长想换行怎么办
LaTeX 表格里的内容太长想换行怎么办目录步骤示例步骤主要有两个步骤: 1.添加下面这行命令 \newcommand{\tabincell}[2]{\begin{tabular}{@{}# ...
antdesign中表格内容太长或者select内容太长如何悬浮显示？
需求:antdesign中表格内容太长或者select内容太长如何悬浮显示? 考虑:我们在学HTML的时候,有一个标签属性是 title,它有什么作用呢? title 属性规定关于元素的额外信息.这些 ...
WinForm中遇到Label要显示的内容太长，自动换行
很多朋友都会在开发WinForm中遇到Label要显示的内容太长,但却不能换行的问题.这里我总结了几种方法,供大家参考. 第一种是把Label的AutoSize属性设为False,手动修改Label的 ...
uni-app手机截图页面某区域内容-生成长图方法
uni-app手机截图页面某区域内容-生成长图方法 (来自我的今日头条,都是我的博客) 以下是截图当前页面指定区域的全部内容方法安卓测试可行,测试机型为华为,ios没有业务需要所以没做,仅供参考,觉 ...
html如何制作展开全文,如何实现文章内容页点击“展开阅读全文”的功能
我们在手机端看CSDN或知乎上的文章时,都会有一个点击展开阅读全文的按钮.这个功能效果使用还是很广泛的,网上也有很多这样的jq插件可以实现,今天小郭给大家分享一下自己在项目中常用到的js点击展开阅读全 ...

前端页面 div+css内容太长，实现点击展开余下全文（修改版）

前端页面 div+css内容太长，实现点击展开余下全文（修改版）相关推荐

最新文章

热门文章