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

文字限制超过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. node获取当前路径的三种方法

    node提供了3种获取路径的方法  ,在当前目录下,运行node const {resolve} = require('path') console.log('__dirname : ' + __di ...

  2. C博客作业06--结构体&文件

    1.本章学习总结 1.1思维导图 1.2本章学习体会 学习了结构和文件,又是懵懵的课了,我的天啊.结构还好,题目集一出就做了,不是很难,感觉掌握的还可以,不过这只是感觉而已,等到真正来写大作业的时候又 ...

  3. go区块链学习教程之iris框架mvc架构

    在Iris框架中,封装了mvc包作为对mvc架构的支持,方便开发者遵循mvc的开发原则进行开发. iris框架支持请求数据.模型.持久数据分层处理,并支持各层级模块代码绑定执行. MVC即:model ...

  4. 服务器硬件与linux系统

    服务器的特性: 高速度的CPU运算能力 长时间的可靠运行 强大的I/O外部数据吞吐能力 服务器通常具有更高的性能,效率,高可靠,高可用性,以及更好的扩展性. 服务器的分类 (1)服务器按外形分类 塔式 ...

  5. linux 分析java 线程状态

    将线程3117 的线程消息放到文件dump17中 jstack 13492 > dump17 分析线程 grep java.lang.Thread.State dump17 | awk '{pr ...

  6. oracle 对表的操作

    对日期数据的插入 insert into tabname(datecol) value(sysdate) ;  -- 用date值 insert into tabname(datecol) value ...

  7. concurrent.futures进行并发编程

    Python中进行并发编程一般使用threading和multiprocessing模块,不过大部分的并发编程任务都是派生一系列线程,从队列中收集资源,然后用队列收集结果.在这些任务中,往往需要生成线 ...

  8. nginx+php+mysql+zabbix服务器安装

    好久没有接触监控类的软件了,今天抽空搭建了下 首先系统环境 zabbix-server-1    centos7.2 本次所需的第三方软件包 以下软件包通过官网下载 zabbix-3.0.3.tar. ...

  9. maven 安装本地jar

    mvn install:install-file -Dfile=D:/open-api-sdk-2.0.jar -DgroupId=com.jd.open -DartifactId=jd-api-sd ...

  10. macOS在使用音视频通话时会降低其他音频声音的解决方法

    在使用QQ进行通话时,背景无法播放音乐(声音过小),并且在QQ for mac中也没有进行调整的设置选项. Solution: printf "p *(char*)(void(*)())Au ...