前段时间，我分享了一种文本展开收起的方法，并得到了广大朋友的积极反馈。其中，有热心的朋友特别提出一个建议，希望将展开收起的按钮放置在文本末尾。为此，我进行了多次调试与尝试，终于实现了这一功能，并在此与大家分享我的成果。
在着手实现之前，我查阅了百度上众多网友的做法，发现很多人都是通过input的checked属性来控制文本的展开与收起。我也采用了这种方式。
但在此基础上，我特别注重了兼容性的处理。因为有些写法在Chrome浏览器上运行得非常好，但在Firefox浏览器上却会出现样式混乱的问题。因此，我进行了相应的调整和优化，确保在各种主流浏览器上都能呈现出良好的效果。
话不多说，上效果展示
具体实现步骤
1. 先搭建基础页面
<div class="wrap"> <input type="checkbox" id="switch" class="input"> <div class="text"> <label class="btn" for="switch"></label> 在清晨的微光中，小镇被一层薄薄的雾气轻轻笼罩，仿佛披上了一层神秘的面纱。 街道两旁的梧桐树在微风中轻轻摇曳，发出沙沙的声响，像是在诉说着不为人知的故事。 远处，炊烟袅袅升起，带着家的温馨和生活的气息。偶尔，一阵清脆的鸟鸣划破寂静， 为这宁静的早晨增添了几分生机。人们开始陆续走出家门，迎接新的一天， 他们的脸上洋溢着期待和希望，仿佛在告诉世界，这里是一个充满活力和希望的地方。 </div> </div>
*{ margin: 0; padding: 0; } .wrap{ max-width: 750px; display: flex; padding: 16px; border: 1px solid rgba(0,0,0,.2); margin: 20px 100px; overflow: hidden; border-radius: 12px; box-shadow: 0 0 10px rgba(0,0,0,.2); position: relative; } .text { line-height: 1.5; max-height: 4.5em; // 这里设置的是最大高度3行，超过隐藏 overflow: hidden; }
2.利用float属性巧妙地将“展开”和“收起”定位至文本右下角
虽然你们可能会觉得利用float属性方式稍显“土”，但不可否认的是，它有独特的价值存在
第一步展开按钮和省略的三个点，运用伪元素即可轻松搞定！这并不难，相信大家都能够轻松驾驭。
.btn { float: right; clear: both; } .btn::before{ content: '...'; position: absolute; } .btn::after{ content:'展开' ; padding-left: 15px; }
第二步要让展开按钮和省略的三个点乖乖待在右下角，确实得动动脑筋想想办法呢
为了给text文本容器添加一个伪元素，让它浮动在右边，我们尝试将高度设置为100%，结果不小心把“展开”文字挤下去了。不过别担心，我们稍微调整了下，给伪元素加了margin-bottom: -24px;，这样“展开”文字就有空间显示啦。看，问题轻松解决！
.text::before{ content: ''; float: right; width: 0; height: 100%; margin-bottom: -24px; }
margin-bottom:-12px;看一下效果
3.实现文字展开收起切换及高度调整
第一步 点击按钮更换文字
.input:checked+.text .btn::after{ content:'收起'; }
第二步将text的max-height的最大高度设置为null，就可以实现基本效果
.input{ display: none; } .input:checked+.text{ max-height: none; }
目前还有个问题要解决，如何在文本不到末尾时隐藏切换按钮，这里就要想点特殊的处理办法
给text添加一个伪元素，在文本后面，并将背景色设置白色，起到遮盖住‘展开收起’按钮的作用，需要注意的是，展开后需要把伪元素遮盖层隐藏，并且将省略号置为空，好了这就完成了。
.text::after { content: ''; width: 100%; height: 20px; position: absolute; transform: translateX(-11px); background: #fff; } .input:checked+.text::after{ visibility: hidden; // 不这样做收起按钮就被遮挡住了，回不去了，哈哈哈哈哈哈 } .input:checked+.text .btn::before{ content: ''; }
完整代码如下
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .wrap{ max-width: 750px; display: flex; padding: 16px; border: 1px solid rgba(0,0,0,.2); margin: 20px 100px; overflow: hidden; border-radius: 12px; box-shadow: 0 0 10px rgba(0,0,0,.2); position: relative; } .text { line-height: 1.5; max-height: 4.5em;// 这里设置的是最大高度3行，超过隐藏 overflow: hidden; } .text::before{ content: ''; float: right; width: 0; height: 100%; margin-bottom: -24px; } .text::after { content: ''; width: 100%; height: 100%; position: absolute; background-color: #fff; } .btn { float: right; clear: both; } .btn::before{ content: '...'; position: absolute; } .btn::after{ content:'展开' ; padding-left: 15px; } .input{ display: none; } .input:checked+.text{ max-height: none; } .input:checked+.text .btn::after{ content:'收起'; } .input:checked+.text::after{ visibility: hidden; } .input:checked+.text .btn::before{ content: ''; } </style> </head> <body> <div class="wrap"> <input type="checkbox" id="switch" class="input"> <div class="text"> <label class="btn" for="switch"></label> 在清晨的微光中，小镇被一层薄薄的雾气轻轻笼罩，仿佛披上了一层神秘的面纱。 街道两旁的梧桐树在微风中轻轻摇曳，发出沙沙的声响，像是在诉说着不为人知的故事。 远处，炊烟袅袅升起，带着家的温馨和生活的气息。偶尔，一阵清脆的鸟鸣划破寂静， 为这宁静的早晨增添了几分生机。人们开始陆续走出家门，迎接新的一天， 他们的脸上洋溢着期待和希望，仿佛在告诉世界，这里是一个充满活力和希望的地方。 </div> </div> </body> </html>
结语
虽然看似是一个微不足道的小功能，但其背后的细节和要点却颇为丰富。
我衷心希望这次的分享能够为大家带来实质性的帮助，同时也非常期待大家能够继续提出宝贵的建议和意见，让我们在共同学习中不断进步。
感谢大家的点赞、收藏与转发，你们的支持与鼓励是我持续前行的最大动力。
另一版本请点击
