CSS如何实现多行文字展开收起的效果
时间：2023-03-11 22:04:41
科技观察
本文转载自微信公众号《三分钟学会前端》，作者安姐。转载本文请联系三分钟学习前端公众号。最终效果：本文主要实现难点：如何实现展开收起切换按钮的文字环绕效果如何实现多行文字的溢出和省略效果如何实现展开收起状态或文字切换初始html:展开但蹄声如雷，十余匹骏马如疾风般卷上山。乘马者皆是黑色薄毡氅，内着黑布衣，但人似虎，马似龙，人灵巧，马亦壮，群雄双目一亮，金光闪耀，可是他们看到，每一匹马的蹄子，竟然都是黄金打造的。一共有十九名骑手，人数虽然不是很多，但是却强如千军万马。前18名骑手冲到附近，将马牵到两侧，最后一名骑手从中疾驰而过。输出
控件按钮的文字环绕效果一般在文字右下方展开和折叠：right:float:rightBottom:margin-top但是margin虽然可以降低按钮，但是达不到文字环绕效果，所以我们这里使用伪元素来实现：局权：float:right局底：.text::before局权.text::before{content:'';float:right;}局底.text::before{content:'';float:right;width:0;height:calc(100%-20px);}我们发现有一个高度塌陷的问题（calc(100%-20px)无效）：因为高度没有显式指定包含块，并且如果元素不是绝对定位，则计算出的值为pseudoauto，auto*100/100=NaN——此时CSS世界的解决方案是：设置一个显式的高度值：这里的高度是动态的，那里没有办法明确指定，所以这个方法不可用？如果显式指定了包含块的高度，则将元素设置为绝对定位：包含块的高度是动态的，不能显式指定，所以这个方法也不可用？在元素外面包裹一层就是包裹具有定位功能的标签：这里是一层flex布局。因为在flex布局的子项中，变化的高度可以按百分比计算，所以这里需要用.text包裹一层，然后设置display:flex
expand但蹄声如雷，十余匹骏马如疾风般卷上山。乘马者皆是黑色薄毡氅，内着黑布衣，但人似虎，马似龙，人灵巧，马亦壮，群雄双目一亮，金光闪耀，可是他们看到，每一匹马的蹄子，竟然都是黄金打造的。一共有十九名骑手，人数虽然不是很多，但是却强如千军万马。前18名骑手冲到附近，将马牵到两侧，最后一名骑手从中疾驰而过。输出 多行文字溢出省略效果我们在CSS中介绍了文字的单行和多行溢出省略效果：多行文本(css).text{display:-webkit-box;overflow:hidden;-webkit-line-clamp:3;-webkit-box-orient:vertical;}-webkit-line-clamp:3(used限制一个块元素显示的文本行数，2表示最多显示2行。为了实现这个效果，需要结合其他WebKit属性)display:-webkit-box(与1结合使用，将物体显示为灵活的盒模型)-webkit-box-orient:vertical(与1结合使用1、设置或检索灵活框对象子元素的排列方式）overflow:hidden（文本溢出有限宽度隐藏内容）text-overflow:ellipsis（多行文本情况下，使用省略号“...”隐藏溢出范围内的文字）如何实现展开折叠状态切换使用inputtype="checkbox"控制展开折叠效果
但是之后文本被展开，控制按钮仍然显示展开，它应该显示为折叠。这里使用伪类生成技术，具体方法是去掉或者隐藏按钮里面的文字，使用伪元素生成
最后，你完成了：
