vue-文字块收缩与展开功能

 

在设计图中要求的效果为：

文字限制超过9行即隐藏，并显示“展开”按钮，点击按钮进行切换，控制文本全部展示和部分展示

在原本的实现过程中，使用了红框内的判断方式：

页面代码：

 

样式则规定嵌套元素给一个死高度，通过对比来进行高度的修改

但是

发现打包以后，文字会出现被切割的情况，如下：

奇了怪了，又没规定死宽度，咋了你还自己切自己呢？于是想尽办法，都定位不到原因之后，发现

-webkit-box-orient: vertical;

这个属性，他不生效

 

ok现在总算有点出路了，但是原来那个写死高度的办法，在部分机型上会出现有时候显示半行文字的情况，也需要修改啊！

所以我决定，不管嵌套元素的高度，只通过文本规定显示行数来展示收缩与显示！

于是新的代码为：

同时处理这个optimize-css-assets-webpack-plugin这个插件的问题：

但是这个注释掉就css就没有压缩了，所以同时为了保证css的压缩，继续修改：

最后：

简洁啊，好看啊！完美啊！文字也不切割了啊！

转载于:https://www.cnblogs.com/nangras/p/10536138.html