vue-文字块收缩与展开功能
时间:2019-03-15
本文章向大家介绍vue-文字块收缩与展开功能,主要包括vue-文字块收缩与展开功能使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
在设计图中要求的效果为:
文字限制超过9行即隐藏,并显示“展开”按钮,点击按钮进行切换,控制文本全部展示和部分展示
在原本的实现过程中,使用了红框内的判断方式:
页面代码:
样式则规定嵌套元素给一个死高度,通过对比来进行高度的修改
但是
发现打包以后,文字会出现被切割的情况,如下:
奇了怪了,又没规定死宽度,咋了你还自己切自己呢?于是想尽办法,都定位不到原因之后,发现
-webkit-box-orient: vertical;
这个属性,他不生效
ok现在总算有点出路了,但是原来那个写死高度的办法,在部分机型上会出现有时候显示半行文字的情况,也需要修改啊!
所以我决定,不管嵌套元素的高度,只通过文本规定显示行数来展示收缩与显示!
于是新的代码为:
同时处理这个optimize-css-assets-webpack-plugin
这个插件的问题:
但是这个注释掉就css就没有压缩了,所以同时为了保证css的压缩,继续修改:
最后:
简洁啊,好看啊!完美啊!文字也不切割了啊!
- CSS Selectors Level 4新特性全面解析
- 巧用外部表避免大量的insert (r4笔记第71天)
- 如何用java语言实现C#中的ref关键字(按引用传递参数)的效果
- 16(01)总结List的子类,ArrayList,Vector,LinkedList
- 16(02)总结泛型
- 基于 React + Webpack 的音乐相册项目(上)
- 16(03)总结增强for循环,静态导入,可变参数
- 基于 React + Webpack 的音乐相册项目(下)
- 通过图表简化sql语句的表关联(r4笔记第70天)
- 通过编程控制CPU利用率(r4笔记第69天)
- Java基础(01)-15总结对象数组,集合Collection,集合List
- 【专业技术】Android内存泄漏简介
- 设计模式之工厂方法(r4笔记第89天)
- delete相关的pl/sql调优(r4笔记第87天)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 高职考技能提升教程013期 冒泡排序法和选择排序法
- python带你剪辑视频
- python自制有声小说
- CVE-2017-8570及利用样本分析
- “既生 ExecutorService, 何生 CompletionService?”
- XXE -XML External Entity
- Vivado时序收敛技术(一) Baseline基础理论
- ShardingJdbc分库分表实战案例解析(上)
- ShaderDesigner:OpenGL shader调试神器
- 手动实现Promise/A+
- GJK算法计算凸多边形之间的距离
- 通过实际案例摸清楚Spring事务传播的行为
- 如何通过容器搭建稳定可靠的私有网盘(NextCloud)
- 初识ABP vNext(1):开篇计划&基础知识
- 基于 HTML5 Canvas 的病毒模拟视觉试验台