现在展开以后，发现按钮不见（被刚才那个伪元素所覆盖，并且也点击不了），如果希望点击以后仍然可见呢？添加一下 :checked 状态即可，在展开时隐藏覆盖层
.exp:checked .text::after{
visibility: hidden;
}
这样，就实现了在文字较少的情况下隐藏展开按钮的功能
最终完整代码可以查看 codepen 多行展开收起自动隐藏，兼容版本可以查看 codepen 多行展开收起自动隐藏（全兼容）
需要注意的是，兼容版本可以支持到 IE 10 （这就过分了啊，居然还支持 IE），但是由于 IE 不支持 codepen，所以测试 IE 可以自行复制在本地测试。
总的来说，重点还是在布局方面，交互其实相对容易，整体实现的成本其实是很低的，也没有比较生僻的属性，除了布局方面 -webkit-box 貌似有点 bug （毕竟是-webkit-内核，火狐只是借鉴了过来，难免有些问题），幸运的是可以通过另一种方式实现多行文本截断效果，兼容性相当不错，基本上全兼容（IE10 ），这里整理一下实现重点
- 文本环绕效果首先考虑 浮动 float
- flex 布局子元素可以通过百分比计算高度
- 多行文本截断还可以结合文本环绕效果用 max-height 模拟实现
- 状态切换可以借助 checkbox
- CSS 改变文本可以采用伪元素生成
- 多利用 CSS 遮挡“障眼法”
多行文本展开收起效果可以说是业界一个老大难的问题了，有很多 js 解决方案，但是感觉都不是很完美，希望这个全新思路的 CSS 解决方式能给各位带来不一样的启发，感谢阅读，欢迎点赞、收藏、转发～
References
[1] vue-clamp: https://justineo.github.io/vue-clamp/demo/?lang=zh
[2] css-flexbox: https://www.w3.org/TR/css-flexbox-1/#algo-stretch
[3] codepen 右下角多行展开环绕效果: https://codepen.io/xboxyan/pen/ExWaBJO
[4] codepen 右下角多行展开环绕效果（全兼容）: https://codepen.io/xboxyan/pen/dyvYNxr
[5] codepen 多行展开收起交互: https://codepen.io/xboxyan/pen/XWMbJeQ
[6] codepen 多行展开收起交互（全兼容）: https://codepen.io/xboxyan/pen/OJpypmR
[7] CSS 奇技淫巧：动态高度过渡动画: https://github.com/chokcoco/iCSS/issues/91
[8] codepen 多行展开收起自动隐藏: https://codepen.io/xboxyan/pen/eYvNvYK
[9] codepen 多行展开收起自动隐藏（全兼容）: https://codepen.io/xboxyan/pen/LYWpWzK
