vue-文字块收缩与展开功能
在设计图中要求的效果为:
文字限制超过9行即隐藏,并显示“展开”按钮,点击按钮进行切换,控制文本全部展示和部分展示
在原本的实现过程中,使用了红框内的判断方式:
页面代码:
样式则规定嵌套元素给一个死高度,通过对比来进行高度的修改
但是
发现打包以后,文字会出现被切割的情况,如下:
奇了怪了,又没规定死宽度,咋了你还自己切自己呢?于是想尽办法,都定位不到原因之后,发现
同时处理这个optimize-css-assets-webpack-plugin
这个插件的问题:
但是这个注释掉就css就没有压缩了,所以同时为了保证css的压缩,继续修改:
最后:
简洁啊,好看啊!完美啊!文字也不切割了啊!
vue-文字块收缩与展开功能的更多相关文章
- 微信小程序 - 文字收缩与展开
wxml <view class='containers'> <text class="content {{ellipsis?'ellipsis':'unellipsis' ...
- 黄聪:phpexcel中文教程-设置表格字体颜色背景样式、数据格式、对齐方式、添加图片、批注、文字块、合并拆分单元格、单元格密码保护
首先到phpexcel官网上下载最新的phpexcel类,下周解压缩一个classes文件夹,里面包含了PHPExcel.php和PHPExcel的文件夹,这个类文件和文件夹是我们需要的,把class ...
- phpexcel中文教程-设置表格字体颜色背景样式、数据格式、对齐方式、添加图片、批注、文字块、合并拆分单元格、单元格密码保护
转:http://www.cnblogs.com/huangcong/p/3687665.html 首先到phpexcel官网上下载最新的phpexcel类,下周解压缩一个classes文件夹,里面包 ...
- PHPExcel-设置表格字体颜色背景样式、数据格式、对齐方式、添加图片、批注、文字块、合并拆分单元格、单元格密码保护
首先到phpexcel官网上下载最新的phpexcel类,下周解压缩一个classes文件夹,里面包含了PHPExcel.php和PHPExcel的文件夹,这个类文件和文件夹是我们需要的,把class ...
- Vue 实现复制到粘贴板功能
vue 实现复制到粘贴板功能需要依赖到 clipboard.js 1. 首先需要安装依赖 * 出现错误的话,可以试试 cnpm npm install --save vue-clipboard2 2 ...
- C#表格文字多收缩样式
C#表格文字多收缩样式 <style> .divOpen { height: 24px; overflow: hidden; } </style> -------------- ...
- EasyMvc入门教程-基本控件说明(7)文字块导航
文字块导航其实就是开发winform时候常见的 带Title的Group面板..~!@#¥..好吧,没开发过winform的同学看下图: 实现代码如下: @Html.Q().BlockField(). ...
- Vue 变异方法splice删除评论功能
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue v-for操作与computed结合功能
<!doctype html> <html lang="en"> <head id="head"> <meta cha ...
随机推荐
- node获取当前路径的三种方法
node提供了3种获取路径的方法 ,在当前目录下,运行node const {resolve} = require('path') console.log('__dirname : ' + __di ...
- C博客作业06--结构体&文件
1.本章学习总结 1.1思维导图 1.2本章学习体会 学习了结构和文件,又是懵懵的课了,我的天啊.结构还好,题目集一出就做了,不是很难,感觉掌握的还可以,不过这只是感觉而已,等到真正来写大作业的时候又 ...
- go区块链学习教程之iris框架mvc架构
在Iris框架中,封装了mvc包作为对mvc架构的支持,方便开发者遵循mvc的开发原则进行开发. iris框架支持请求数据.模型.持久数据分层处理,并支持各层级模块代码绑定执行. MVC即:model ...
- 服务器硬件与linux系统
服务器的特性: 高速度的CPU运算能力 长时间的可靠运行 强大的I/O外部数据吞吐能力 服务器通常具有更高的性能,效率,高可靠,高可用性,以及更好的扩展性. 服务器的分类 (1)服务器按外形分类 塔式 ...
- linux 分析java 线程状态
将线程3117 的线程消息放到文件dump17中 jstack 13492 > dump17 分析线程 grep java.lang.Thread.State dump17 | awk '{pr ...
- oracle 对表的操作
对日期数据的插入 insert into tabname(datecol) value(sysdate) ; -- 用date值 insert into tabname(datecol) value ...
- concurrent.futures进行并发编程
Python中进行并发编程一般使用threading和multiprocessing模块,不过大部分的并发编程任务都是派生一系列线程,从队列中收集资源,然后用队列收集结果.在这些任务中,往往需要生成线 ...
- nginx+php+mysql+zabbix服务器安装
好久没有接触监控类的软件了,今天抽空搭建了下 首先系统环境 zabbix-server-1 centos7.2 本次所需的第三方软件包 以下软件包通过官网下载 zabbix-3.0.3.tar. ...
- maven 安装本地jar
mvn install:install-file -Dfile=D:/open-api-sdk-2.0.jar -DgroupId=com.jd.open -DartifactId=jd-api-sd ...
- macOS在使用音视频通话时会降低其他音频声音的解决方法
在使用QQ进行通话时,背景无法播放音乐(声音过小),并且在QQ for mac中也没有进行调整的设置选项. Solution: printf "p *(char*)(void(*)())Au ...