问题进阶
- 简单实现
- 打包后,居然没有效果!
- 注释加了,效果好了,控制台警告却亮起了(强迫症不能忍!!)
- 数字或英文情况下,省略号居然又没啦!!!
简单实现
max-width: 75px;
display: -webkit-box; /*作为弹性伸缩盒子模型显示*/
-webkit-box-orient: vertical; /*伸缩盒子的子元素排列:从上到下*/
text-overflow: ellipsis; /* 溢出用省略号*/
-webkit-line-clamp: 1; /*显示的行数;如果要设置2行加...则设置为2*/
overflow: hidden; /*超出的文本隐藏*/
正常情况下,本地跑项目效果基本都OK。
打包后,居然没有效果!
打包后,-webkit-box-orient: vertical; 会消失,溢出省略号会失效。
原因:autoprefixer会自动移除老式过时的代码
display: -webkit-box;
-webkit-line-clamp: 1;
overflow: hidden;
text-overflow: ellipsis;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
加上两条注释,正常情况下,效果达成!
ps:需检查当前项目是否安装了去除注释的插件
注释加了,效果好了,控制台警告却亮起了(强迫症不能忍!!)
原因:css处理语句处理的是整个css块,而不是在此之后的css(这个问题一般出现在windows系统设备中)
display: -webkit-box;
-webkit-line-clamp: 1;
overflow: hidden;
text-overflow: ellipsis;
/*! autoprefixer: ignore next */
-webkit-box-orient: vertical;
/* autoprefixer: on */
修改注释,咱就是说,一整个清净了~
数字或英文情况下,省略号居然又没啦!!!
display: -webkit-box;
-webkit-line-clamp: 1;
overflow: hidden;
text-overflow: ellipsis;
/*! autoprefixer: ignore next */
-webkit-box-orient: vertical;
/* autoprefixer: on */
word-break: break-all; /*兼容英文*/
完美解决~ 撒花~ ~ ~ ~ ~ ~