说多行文本溢出隐藏之前先来说一下单行文本
//单行文本溢出需要满足三个条件：
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
但是经过试验，同样的方法在多文本中并不适用，多文本溢出需要满足下面几个条件：
display:-webkit-box;
overflow:hidden;
text-overflow:ellipsis;
-webkit-box-orient:vertical; //子元素应该被水平或垂直排列
-webkit-line-clamp:3; //3行后显示省略号
demo： 多行文本超过三行隐藏，显示省略号，并在省略号后显示‘展开’二字，点击内容完整显示并可以收缩自如。 最终效果如图：
第一步：整体框架：（一个按钮，一段文字）
<div class="text">
<label class="btn">展开</label>
<span>
天下武功，唯快不破！每一次踏上赛场，我的脑海里都只有一件事：竭尽全力跑出“中国速度”，为我的祖国添彩！今天能打破亚洲纪录，打破黄种人的极限，站在东京奥运百米决赛的跑道上，我所有的梦想都在这一瞬间变成了现实！ 一百米的跑道是比谁跑得更快，而人生的跑道是比谁跑得更远、更好、更宽广。请相信中国田径，相信你自己，没有什么不可能！</span>
</div>
<style>
.text {
width: 475px;
border: #efd56e solid 1px;
color: #333;
font-size: 14px;
}
.btn {
cursor: pointer;
}
</style>
将‘展开’二字放到整体布局的右下角
//注意：此处需要实现文字环绕效果，所以利用伪元素实现最佳
.text::before{
content: '';
float: right;
width: 0;
height: calc(100% - 20px);
}
//但此处发生高度塌陷，height不生效，解决方法：外层套一层盒子
<div class="content">
<div class="text">
<label class="btn" for="exp">展开</label>
<span>
天下武功，唯快不破！每一次踏上赛场，我的脑海里都只有一件事：竭尽全力跑出“中国速度”，为我的祖国添彩！今天能打破亚洲纪录，打破黄种人的极限，站在东京奥运百米决赛的跑道上，我所有的梦想都在这一瞬间变成了现实！ 一百米的跑道是比谁跑得更快，而人生的跑道是比谁跑得更远、更好、更宽广。请相信中国田径，相信你自己，没有什么不可能！</span>
</div>
</div>
文本超过三行溢出隐藏效果
//为text选择器添加css样式
.text {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
第四步：实现展开收起功能（使用input type='checkbox' 控制状态切换） 同时为label标签绑定,利用伪元素控制按钮的文字（展开/收起）
<div class="content">
<input type="checkbox" id="exp" />
<div class="text">
<label class="btn" for="exp"></label>
<span> 天下武功，唯快不破！每一次踏上赛场，我的脑海里都只有一件事：竭尽全力跑出“中国速度”，为我的祖国添彩！今天能打破亚洲纪录，打破黄种人的极限，站在东京奥运百米决赛的跑道上，我所有的梦想都在这一瞬间变成了现实！ 一百米的跑道是比谁跑得更快，而人生的跑道是比谁跑得更远、更好、更宽广。请相信中国田径，相信你自己，没有什么不可能！</span>
</div>
</div>
<style>
.btn::after{
content:'展开'
}
#exp:checked+.text .btn::after{
content:'收起'
}
</style>
