此处是大致实现的原理，具体的js点击操作，大家可自行添加。不过最重要的也就是这篇文章说到的 css 知识点
～～具体可直接复制源码查看效果，鼠标 hover 到内容上即可～～
效果1：
这种效果可以定制文字最多显示几行后...隐藏掉，但是没有过渡效果，此处定义的是3行
-webkit-line-clamp: 3;
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.text {
display: inline-block;
border: 1px solid black;
width: 400px;
background: #f1f1f1;
padding: 0 20px;
}
p {
display: -webkit-box;
-webkit-box-orient: vertical;
/* 超出几行时省略号显示，此处是3行 */
-webkit-line-clamp: 3;
word-wrap: break-word;
overflow: hidden;
}
.text:hover p {
-webkit-line-clamp: inherit
}
</style>
</head>
<body>
<div class="text">
<p>
传染病及突发公共卫生事件报告制度
为了及时有效遏制传染病的发生和
幼儿园园长为幼儿园疫情报告和突发公共卫生事件的管理第一责任人，卫生保健教师是幼儿园疫情和突发公共卫生事件报告人。幼儿园其他教职员工发现传染病疫情均有义务向园长和疫情报告人提供情况。.
一、疫情报告人职责
1、在园长的领导下，具体负责本幼儿园传染病疫情和疑似传染病疫情等突发公共卫生事件报告工作;
2、每天要对全园幼儿的出勤、健康情况进行巡查;
3、负责指导全园幼儿的晨检L作和传染病疫情的防治及各类且生消毒、食品监督等工作。
三、疫情报告内容及时限
1、建立突发事件应急报告制度。即幼儿园教职工如发现有传染病疫情或其他突发公共事件的应在第-一时间向园长报告，随后园长和疫情报告人根据传染病疫情或其他突发公共事件立即向上级有关部门报告。(镇教育管理组一-卫生院一-疾控)
2、当幼儿园发现传染病或疑似传染病病人时(3名幼儿出现不明原因的发热、呕吐、腹泻、皮疹等症状时，疫情发现人和疫情报告人应当第一时间报告园长并在24小时内报出相关信息。并协助有关
</p>
</div>
</body>
</html>
效果2：
此效果主要是根据 max-height 进行的内容截取，不能定义行数，只能根据你设置的最大高度显示对应内容，不过可以设置过渡效果。（具体实现原理可查看 此篇文章 ）
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.text {
display: inline-block;
border: 1px solid black;
width: 400px;
overflow: hidden;
background: #f1f1f1;
padding: 0 20px;
max-height: 100px;
transition: max-height .5s;
}
.text:hover {
/* 可以设置大点，但是太大的话过度效果不怎么好 */
max-height: 3000px;
}
</style>
</head>
<body>
<div class="text">
<p>
传染病及突发公共卫生事件报告制度
为了及时有效遏制传染病的发生和
幼儿园园长为幼儿园疫情报告和突发公共卫生事件的管理第一责任人，卫生保健教师是幼儿园疫情和突发公共卫生事件报告人。幼儿园其他教职员工发现传染病疫情均有义务向园长和疫情报告人提供情况。.
一、疫情报告人职责
1、在园长的领导下，具体负责本幼儿园传染病疫情和疑似传染病疫情等突发公共卫生事件报告工作;
2、每天要对全园幼儿的出勤、健康情况进行巡查;
3、负责指导全园幼儿的晨检L作和传染病疫情的防治及各类且生消毒、食品监督等工作。
三、疫情报告内容及时限
1、建立突发事件应急报告制度。即幼儿园教职工如发现有传染病疫情或其他突发公共事件的应在第-一时间向园长报告，随后园长和疫情报告人根据传染病疫情或其他突发公共事件立即向上级有关部门报告。(镇教育管理组一-卫生院一-疾控)
2、当幼儿园发现传染病或疑似传染病病人时(3名幼儿出现不明原因的发热、呕吐、腹泻、皮疹等症状时，疫情发现人和疫情报告人应当第一时间报告园长并在24小时内报出相关信息。并协助有关
</p>
</div>
</body>
</html>
网友评论