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 ...
随机推荐
- kaggle learn python
def has_lucky_number(nums): return any([num % 7 == 0 for num in nums]) def menu_is_boring(meals): &q ...
- python 之路 day5 - 常用模块
模块介绍 time &datetime模块 random os sys shutil json & picle shelve xml处理 yaml处理 configparser has ...
- 对接 第三方物流APP 手机版
昨天因为bibi项目要对接 物流信息 开始找了快递鸟文档,但是要填写申请APP,必须要注册公司才可以,这样非常麻烦.下面的第三方物理接口,绝对让你满意. https://m.kuaidi100.com ...
- python '%r'或者'{!r}'的意思
转载:https://blog.csdn.net/a19990412/article/details/80149112 这两个都是python的转译字符, 类似于%r, %d,%f >>& ...
- php项目命名规范
命名规范 ThinkPHP5遵循PSR-2命名规范和PSR-4自动加载规范,并且注意如下规范: 目录和文件 目录使用小写+下划线: 类库.函数文件统一以.php为后缀: 类的文件名均以命名空间定义,并 ...
- 组装一台PRUSA I3打印机
闲来无事,又搞了台机.这样下去顶不住了.草. 还是咸鱼购买,但是这台收到的时候比我以前任何一台都要散,几乎重新装了一台. 此处省略收到货时候的零件图,省略装机图. 不得不提的是,原机用的山寨melzi ...
- java导出excel,多表头合并
要求结果图如下: 有空补充具体逻辑 参考:https://blog.csdn.net/dj0721/article/details/72463042 HSSFColor 背景颜色选择 参考:htt ...
- 解决 httpclient 下 Address already in use: connect 的错误
最近做httpclient做转发服务,发现服务器上总是有很多close_wait状态的连接,而且这些连接都不会关闭,最后导致服务器没法建立新的网络连接,从而停止响应. 后来在网上搜索了一下,发现解决的 ...
- 基于OpenCV做“三维重建”(1)--找到并绘制棋盘
<OpenCV计算机视觉编程攻略(第3版)>这套书已经出到第3版了,如果你非要我说这本书有多好,我说不出来:只是很多我第一手的例子都是来源于这本书的-相比较OpenCV官方提供的代码,这本 ...
- TreeMap,HashMap,LinkedHashMap区别,很简单解释
TreeMap,HashMap,LinkedHashMap之间的区别和TreeSet,HashSet,LinkedHashSet之间的区别相似. TreeMap:内部排序. HashMap:无序. L ...