多行展开收起自动隐藏

https://juejin.cn/post/6963904955262435336

https://mp.weixin.qq.com/s/P8I8za6S1QG20MGg-2BnjQ

多行展开收起自动隐藏（全兼容）

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>多行展开收起自动隐藏（全兼容）</title> <style type="text/css"> .wrapper { display: flex; margin: 50px auto; width: 800px; overflow: hidden; border-radius: 8px; padding: 15px; box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff; } .text { font-size: 20px; overflow: hidden; text-overflow: ellipsis; text-align: justify; /* display: flex; */ /* display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; */ position: relative; line-height: 1.5; max-height: 4.5em; transition: .3s max-height; } .text::before { content: ''; height: calc(100% - 26px); float: right; } .text::after { content: ''; width: 100%; height: 100%; position: absolute; background: #fff; } .btn { position: relative; float: right; clear: both; margin-left: 20px; font-size: 16px; padding: 0 8px; background: #3F51B5; line-height: 24px; border-radius: 4px; color: #fff; cursor: pointer; /* margin-top: -30px; */ } .btn::after { content: '展开' } .exp { display: none; } .exp:checked+.text { max-height: 200px; } .exp:checked+.text::after { visibility: hidden; } .exp:checked+.text .btn::before { visibility: hidden; } .exp:checked+.text .btn::after { content: '收起' } .btn::before { content: '...'; position: absolute; left: -5px; color: #333; transform: translateX(-100%) } </style> </head> <body> <div class="wrapper"> <input id="exp1" class="exp" type="checkbox"> <div class="text"> <label class="btn" for="exp1"></label> 浮动元素是如何定位的正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。在下面的图片中，有三个红色的正方形。其中有两个向左浮动，一个向右浮动。要注意到第二个向左浮动的正方形被放在第一个向左浮动的正方形的右边。如果还有更多的正方形这样浮动，它们会继续向右堆放，直到填满容器一整行，之后换行至下一行。 </div> </div> <div class="wrapper"> <input id="exp2" class="exp" type="checkbox"> <div class="text"> <label class="btn" for="exp2"></label> 浮动元素是如何定位的正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。 </div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

多行展开收起自动隐藏

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>多行展开收起自动隐藏（全兼容）</title> <style type="text/css"> .wrapper { display: flex; margin: 50px auto; width: 800px; overflow: hidden; border-radius: 8px; padding: 15px; box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff; } .text { font-size: 20px; overflow: hidden; text-overflow: ellipsis; text-align: justify; /* display: flex; */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; position: relative; } .text::before { content: ''; height: calc(100% - 24px); float: right; } .text::after { content: ''; width: 100%; height: 100%; position: absolute; background: #fff; } .btn { float: right; clear: both; margin-left: 10px; font-size: 16px; padding: 0 8px; background: #3F51B5; line-height: 24px; border-radius: 4px; color: #fff; cursor: pointer; /* margin-top: -30px; */ } .btn::before { content: '展开' } .exp { display: none; } .exp:checked+.text { -webkit-line-clamp: 999; } .exp:checked+.text::after { visibility: hidden; } .exp:checked+.text .btn::before { content: '收起' } </style> </head> <body> <div class="wrapper"> <input id="exp1" class="exp" type="checkbox"> <div class="text"> <label class="btn" for="exp1"></label> 浮动元素是如何定位的正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。在下面的图片中，有三个红色的正方形。其中有两个向左浮动，一个向右浮动。要注意到第二个向左浮动的正方形被放在第一个向左浮动的正方形的右边。如果还有更多的正方形这样浮动，它们会继续向右堆放，直到填满容器一整行，之后换行至下一行。 </div> </div> <div class="wrapper"> <input id="exp2" class="exp" type="checkbox"> <div class="text"> <label class="btn" for="exp2"></label> 浮动元素是如何定位的正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。 </div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 多行展开收起自动隐藏