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

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

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

页面代码:

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

但是

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

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

-webkit-box-orient: vertical;
这个属性,他不生效
 
ok现在总算有点出路了,但是原来那个写死高度的办法,在部分机型上会出现有时候显示半行文字的情况,也需要修改啊!
所以我决定,不管嵌套元素的高度,只通过文本规定显示行数来展示收缩与显示!
于是新的代码为:

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

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

最后:

简洁啊,好看啊!完美啊!文字也不切割了啊!

vue-文字块收缩与展开功能的更多相关文章

  1. 微信小程序 - 文字收缩与展开

    wxml <view class='containers'> <text class="content {{ellipsis?'ellipsis':'unellipsis' ...

  2. 黄聪:phpexcel中文教程-设置表格字体颜色背景样式、数据格式、对齐方式、添加图片、批注、文字块、合并拆分单元格、单元格密码保护

    首先到phpexcel官网上下载最新的phpexcel类,下周解压缩一个classes文件夹,里面包含了PHPExcel.php和PHPExcel的文件夹,这个类文件和文件夹是我们需要的,把class ...

  3. phpexcel中文教程-设置表格字体颜色背景样式、数据格式、对齐方式、添加图片、批注、文字块、合并拆分单元格、单元格密码保护

    转:http://www.cnblogs.com/huangcong/p/3687665.html 首先到phpexcel官网上下载最新的phpexcel类,下周解压缩一个classes文件夹,里面包 ...

  4. PHPExcel-设置表格字体颜色背景样式、数据格式、对齐方式、添加图片、批注、文字块、合并拆分单元格、单元格密码保护

    首先到phpexcel官网上下载最新的phpexcel类,下周解压缩一个classes文件夹,里面包含了PHPExcel.php和PHPExcel的文件夹,这个类文件和文件夹是我们需要的,把class ...

  5. Vue 实现复制到粘贴板功能

    vue 实现复制到粘贴板功能需要依赖到 clipboard.js 1. 首先需要安装依赖  * 出现错误的话,可以试试 cnpm npm install --save vue-clipboard2 2 ...

  6. C#表格文字多收缩样式

    C#表格文字多收缩样式 <style> .divOpen { height: 24px; overflow: hidden; } </style> -------------- ...

  7. EasyMvc入门教程-基本控件说明(7)文字块导航

    文字块导航其实就是开发winform时候常见的 带Title的Group面板..~!@#¥..好吧,没开发过winform的同学看下图: 实现代码如下: @Html.Q().BlockField(). ...

  8. Vue 变异方法splice删除评论功能

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Vue v-for操作与computed结合功能

    <!doctype html> <html lang="en"> <head id="head"> <meta cha ...

随机推荐

  1. 如何提高单片机C语言代码效率

    代码效率包括两个方面内容:代码的大小和代码执行速度.如果代码精简和执行速度快,我们就说这个代码效率高.一般情况下,代码精简了速度也相应提上来了.单片机的ROM和RAM的空间都很有限,当您编程时遇到单片 ...

  2. ftp 上传和下载

    ftp 下载 #!/bin/bash #auth liwei #date DATE=$(date -d today +%Y%m%d) #data files path SRCDIR=/home/web ...

  3. Flask实战-留言板-使用Flask-DebugToolbar调试程序、Flask配置的两种组织形式

    使用Flask-DebugToolbar调试程序 扩展Flask-DebugToolbar提供了一系列调试功能,可以用来查看请求的SQL语句.配置选项.资源加载情况等信息.这些信息在开发时会非常有用. ...

  4. 20175208 《Java程序设计》第七周学习总结

    20175208<Java程序设计>第七周学习总结 第八章-常用实用类String类 构造String对象 string类: (1)常量对象:常量池中的数据在程序运行期间再也不允许改变. ...

  5. C#通过Ado.net对连接数据库并进行添加删除等常规操作的代码

    如下资料是关于C#通过Ado.net对连接数据库并进行添加删除等常规操作的内容. static string sqlcon = "server=.;database=;Integrated ...

  6. Java基础总结1

    数据类型: byte    1字节 short   2字节 int        4字节 long     8字节 float     4字节 double   8字节 char       2字节 ...

  7. 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 ...

  8. Vagrant Box下载缓慢解决方法

    box 搜索页面:https://atlas.hashicorp.com/boxes/search example:homestead 1,选中box和版本,先根据提示安装 2,获取box下载地址,采 ...

  9. windows中cmd常用命令收集

    1.经常会启动端口后忘关,需要杀端口的命令:查找端口占用命令 netstat -ano|findstr 端口例如      (8081)      杀端口: taskkill /pid xxxxx - ...

  10. java四则运算 界面化

    本次作业要求来自:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE2/homework/2232 项目的地址:https://github.com/kdays ...