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 ...
随机推荐
- 如何提高单片机C语言代码效率
代码效率包括两个方面内容:代码的大小和代码执行速度.如果代码精简和执行速度快,我们就说这个代码效率高.一般情况下,代码精简了速度也相应提上来了.单片机的ROM和RAM的空间都很有限,当您编程时遇到单片 ...
- ftp 上传和下载
ftp 下载 #!/bin/bash #auth liwei #date DATE=$(date -d today +%Y%m%d) #data files path SRCDIR=/home/web ...
- Flask实战-留言板-使用Flask-DebugToolbar调试程序、Flask配置的两种组织形式
使用Flask-DebugToolbar调试程序 扩展Flask-DebugToolbar提供了一系列调试功能,可以用来查看请求的SQL语句.配置选项.资源加载情况等信息.这些信息在开发时会非常有用. ...
- 20175208 《Java程序设计》第七周学习总结
20175208<Java程序设计>第七周学习总结 第八章-常用实用类String类 构造String对象 string类: (1)常量对象:常量池中的数据在程序运行期间再也不允许改变. ...
- C#通过Ado.net对连接数据库并进行添加删除等常规操作的代码
如下资料是关于C#通过Ado.net对连接数据库并进行添加删除等常规操作的内容. static string sqlcon = "server=.;database=;Integrated ...
- Java基础总结1
数据类型: byte 1字节 short 2字节 int 4字节 long 8字节 float 4字节 double 8字节 char 2字节 ...
- Eclipse中启动Tomcat报错:[There is insufficient memory for the Java Runtime Environment to continue.]的解决方案
1,报错截图 2,报错信息 五月 08, 2018 9:57:58 上午 org.apache.tomcat.util.digester.SetPropertiesRule begin 警告: [Se ...
- Vagrant Box下载缓慢解决方法
box 搜索页面:https://atlas.hashicorp.com/boxes/search example:homestead 1,选中box和版本,先根据提示安装 2,获取box下载地址,采 ...
- windows中cmd常用命令收集
1.经常会启动端口后忘关,需要杀端口的命令:查找端口占用命令 netstat -ano|findstr 端口例如 (8081) 杀端口: taskkill /pid xxxxx - ...
- java四则运算 界面化
本次作业要求来自:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE2/homework/2232 项目的地址:https://github.com/kdays ...