vue + scss,文本超过多行需要省略号，不起作用

正常设置超过多行，显示省略号（仅部分浏览器支持）

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

结果这样设置了，在vue+scss中不起作用，原因是，在scss编译的过程中，会去掉 -webkit-box-orient: vertical；的属性，需要在代码中添加

 word-wrap: break-word;word-break: break-all;line-height: 30px;display: -webkit-box;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 3;/*!autoprefixer:off*/-webkit-box-orient: vertical;/*autoprefixer:on*/height: 90px;

/*!autoprefixer:off*/ 和 /*autoprefixer:on*/，是把autoprefixer这个属性给自动跳过了
有的时候这样写会报错，这和你安装的scss loader版本有关，
警告’Autoprefixer applies control comment to whole block, not to next rules.’

/*! autoprefixer: ignore next */
-webkit-box-orient: vertical;
/* autoprefixer: on */

vue + scss,文本超过多行需要省略号，不起作用相关推荐

css文本超过多行显示省略号兼容所有浏览器
在网上找到的都是用js判断的(https://www.cnblogs.com/zoumiaomiao/p/4952625.html https://www.cnblogs.com/ChanWunsam ...
文本超过指定行数显示折叠、展开按钮并以三个点结束
需求一段从接口获取到的文本,要求显示时,如果长度超过指定行数,则以三个点省略后面内容,并出现"全文"按钮,点击后显示全文,"全文"按钮变成"收起&q ...
html5文本超过指定行数隐藏显示省略号
这个很简单,直接贴代码就好了 HTML <span class="name">博客园是一个面向开发者的知识分享社区.自创建以来,博客园一直致力并专注于为开发者打造一个纯 ...
文本超出多行显示省略号移动端禁止双击缩放
文本超出两行显示省略号移动端禁止双击缩放单行显示省略号 overflow:hidden; text-overflow:ellipsis; white-space:nowrap 多行省略 displ ...
CSS实现文本超过指定长度显示省略号
1 <style type="text/css"> 2 li { 3 width:200px;/*宽度,超过即会溢出*/ 4 line-height:25px;/*设置 ...
html - - - 文字超过三行显示省略号，文字超过几行显示省略号
代码 /* 文字三行以上显示省略号 */ overflow: hidden; /*超出内容隐藏*/ text-overflow: ellipsis; /*超出内容为省略号*/ display: -we ...
vue中实现文字超过2行... 展开-收起(兼容ie)
先看看实际效果 2.需求一步一步分析当文字超出省略号就想到css样式实现(ie不兼容) overflow: hidden; text-overflow: ellipsis;display: -we ...
html 点击展开显示全部,多行溢出省略号显示及点击展开（css/js）实现！
关于多行溢出显示省略号的问题,如果是根据字符的长度个数限制超过部分替换为省略号,这种还是很好处理的,关键是根据行数,在未知情况下你不知道需要多少内容,去填满一个元素,做起来还是比较麻烦的,网上很多种 ...
Vue 文本超过三行展示省略号，并加上展开和收起的功能
场景:在vue项目中文本超过三行展示省略号,并加上展开和收起的功能在处理多行文本时,经常会遇到各种各样的需求,比如至多展示三行,多余的部分不展示并以省略号结尾:又比如在这个基础上加上一个展开和收起的 ...

vue + scss,文本超过多行需要省略号，不起作用

vue + scss,文本超过多行需要省略号，不起作用相关推荐

最新文章

热门文章