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

文字限制超过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. python中sorted()和set()去重,排序

    前言 在看一个聊天机器人的神经网络模型训练前准备训练数据,需要对训练材料做处理(转化成张量)需要先提炼词干,然后对词干做去重和排序 words = sorted(list(set(words))) 对 ...

  2. Linux基础命令---top显示进程信息

    top top指令用来显示Linux的进程信息,这是一个动态显示的过程.top提供运行系统的动态实时视图.它可以显示系统摘要信息以及当前由Linux内核管理的任务列表.所显示的系统摘要信息的类型以及为 ...

  3. 软件测试实验四----mujava变异测试

    1.整个路径结构 2.具体内容 2.1mujava的安装 2.1.1更改CLASSPATH环境变量,使命令行可以找到mujava的路径,方便之后mujava的使用. 2.1.2在系统某一路径下按照格式 ...

  4. GitHub Toturial

    GitHub Toturial Git Summary 1. 设置姓名和email git config --global user.name "YuboFeng" git con ...

  5. nginx配置访问频率

    nginx可以通过limit_conn_zone和limit_req_zone两个组件来限制客户端访问服务端的目录和文件的频率和次数,能够抵挡住部分cc.ddos攻击. 限制访问频率: http{ . ...

  6. MySQL中 Data truncated for column 'xxx'解决方法

    DATA truncated FOR COLUMN 'description' AT ROW 1 1.错误再现 表中存在null字段 此时,修改表中某字段为主键 2.解决方法 不允许数据库中出现nul ...

  7. 读Vue源码二 (响应式对象)

    vue在init的时候会执行observer方法,如果value是对象就直接返回,如果对象上没有定义过_ob_这个属性,就 new Observer实例 export function observe ...

  8. redis.exceptions.ConnectionError: Error 111 connecting to localhost:6379. Connection refused.

    $ pip install redis>>> import redis>>> conn = redis.Redis()>>> conn.keys( ...

  9. Python3 tkinter基础 Spinbox 可输入 能调整的 从指定范围内选择参数的控件

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  10. 从事三年java开发后, 我打算转人工智能

    作为一个2015年参加java培训,2016年计算机科学与技术本科毕业后一直从事java开发的程序员来说, 做出这一步真的不容易, 可是我没赶上java最火的时候,反而渐渐感受到了java的没落, 目 ...