Vue文本内容如何实现规定行数后自动展开或收起？

本文共计1774个文字，预计阅读时间需要8分钟。

文字比较难理解，直接看图应该就明白了。需求+工作中遇到的，需求就是超过四行得有一个展开按钮，点击展开显示所有内容，不超过四行的就不需要这个按钮并显示所有内容。

文字比较难解释，直接看图应该就懂是要做什么了。

需求

工作中遇到的，需求就是超过四行得有个展开按钮，点击展开显示所有内容，不超过四行的话就不需要这个按钮并显示所有内容。

思路首先得判断文本自否超过四行，因为这些一般都是是前端异步请求然后后端发送过来，在组长的指导下，使用了 Vue 中的 nextTick 来监听 DOM 中是数据变化。接下来主要是 css 上的思路，其实上图可以分为两部分，如下图，标号1的部分展示前面三行，标号为2的部分会根据1的行数判断缩进的大小，然后展示第四行。最后通过背景色的控制让两者看上去是一段文字。