多行文本溢出省略
开发微信公众号时，有这样一个需求
2。逐步分析需求
当文字超过省略号时，我想到CSS样式实现（即不兼容）
溢出：隐藏； 文本溢出：省略号； 显示：-webkit-box； -webkit-box-orient：垂直； -webkit线夹：2；
3。由于我也是个懒人，所以就想在网上找找。我读了几篇文章，它们都是根据宽度和高度计算的。我看了看文字，比较复杂。它们仅适用于单个文本。实际上一般情况下，数据都是以列表的形式显示的
代码如下：复制代码运行，兼容IE
当汉字超过 2 行时，Vue 显示省略号。展开-折叠 占位符 {{item.desc}}展开
按住
4。分析代码
省略号是通过:after伪类实现的
一行文字在浏览器中显示时的高度是不一样的，所以这里我在页面上放置了一段占位符文字，并设置了隐藏占位符
通过获取占位符文本的高度计算2行文本内容 * 2 动态改变状态null-不展开和折叠 true-expand false-collapse 与max-height结合实现
5。结束（不懂的可以提问交流，谢谢）
上面关于Vue在移动项目中实现多行文本溢出的文章是小编分享的全部内容。希望能给大家一个参考，也希望大家支持来客网。
