短信预约-IT技能 免费直播动态提醒
短信预约提醒成功
本文转载自微信公众号「三分钟学前端」，作者sisterAn 。转载本文请联系三分钟学前端公众号。
最终实现效果：
本文主要实现难点：
初始 html：
"text"> -
"btn" >展开 -
- 但听得蹄声如雷，十余乘马疾风般卷上山来。马上乘客一色都是玄色薄毡大氅，
- 里面玄色布衣，但见人似虎，马如龙，人既矫捷，马亦雄骏，每一匹马都是高头
- 长腿，通体黑毛，奔到近处，群雄眼前一亮，金光闪闪，却见每匹马的蹄铁竟然
- 是黄金打就。来者一共是一十九骑，人数虽不甚多，气势之壮，却似有如千军万
- 马一般，前面一十八骑奔到近处，拉马向两旁一分，最后一骑从中驰出
一般展开、收起按钮都在文字的右下脚：
但 margin 虽然可以将按钮局下，但它无法实现文字环绕效果，所以我们这里利用伪元素实现：
局右
- .text::before{
- content: '';
- float: right;
- }
局下
- .text::before{
- content: '';
- float: right;
- width: 0;
- height: calc(100% - 20px);
- }
我们发现出现了高度塌陷( calc(100% - 20px) 无效)的问题：
由于包含块的高度没有显式指定，并且该元素不是绝对定位，则计算值伪 auto，auto * 100/100 = NaN
— CSS 世界
此时解决办法有：
这里包一层 flex 布局。因为在 flex 布局的子项中，可以通过百分比来计算变化高度，因此，这里需要给 .text 包裹一层，然后设置 display: flex
"content"> -
"text" > -
"btn" for="exp">展开 -
- 但听得蹄声如雷，十余乘马疾风般卷上山来。马上乘客一色都是玄色薄毡大氅，
- 里面玄色布衣，但见人似虎，马如龙，人既矫捷，马亦雄骏，每一匹马都是高头
- 长腿，通体黑毛，奔到近处，群雄眼前一亮，金光闪闪，却见每匹马的蹄铁竟然
- 是黄金打就。来者一共是一十九骑，人数虽不甚多，气势之壮，却似有如千军万
- 马一般，前面一十八骑奔到近处，拉马向两旁一分，最后一骑从中驰出
-
-
我们在 CSS 实现文本的单行和多行溢出省略效果 介绍过：
多行文本(css)
- .text {
- display: -webkit-box;
- overflow: hidden;
- -webkit-line-clamp: 3;
- -webkit-box-orient: vertical;
- }
使用 input type="checkbox" 控制展开与收起效果
"checkbox" id="exp" /> -
-
但文字展开后控制按钮依然显示 展开 ，应该显示 收起 才对
这里使用伪类生成技术，具体做法就是去除或者隐藏按钮里面的文字，采用伪元素生成
"btn" for="exp"> -
最终，大功告成：
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
历年真题答案解析
备考技巧名师总结
高频考点精准押题193.9 KB下载数265
191.63 KB下载数245
143.91 KB下载数1148
183.71 KB下载数642
644.84 KB下载数2756
