在实际开发中我们经常会遇到**一行省略**的需求, 相信这种样式大家早就滚瓜烂熟了, 但是有时产品会让我们在边上**加个按钮, 点击按钮还要能多行显示具体内容:** ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/06e397fdb2564613896847fc5e3f0a80~tplv-k3u1fbpfcp-zoom-1.image) ### 不好意思放错图片了...... 大概是这样的: ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0932d7b395cf482aa8e85f7dbc2d0ca5~tplv-k3u1fbpfcp-zoom-1.image) 这里会涉及到两个需求: > **1.如何让按钮动态控制一行,多行之间的转化** > -- 1.1 通过控制父级的高度和样式, 来实现扩展功能(一行高度固定, 多余省略 / 多行高度auto) > **2.屏幕大小动态变化时, 内容可能会超出也可能不会, 此时需要动态的控制按钮的显示** >-- 2.1 添加屏幕自适应 ### HTML结构: ```html ``` ### vue.js: ```ts ``` ### css: ```css ``` #### 注意和总结: **1. 通过比较span的宽度和父级的宽度, 来判断是否会超出父级宽度, 动态的给元素添加不同的类样式(超出就一行省略) 2. 通过css控制父级的高度来实现展开功能(多行高度auto, 取消强行一行显示) 3. 添加屏幕自适应来动态控制按钮的显示和隐藏 4. 之所以使用span来放内容, 是因为span是行内元素, 其offsetWidth就是内容的真实宽度** 好了, 今天就分享到这里啦~ 感谢大家!