一般使用下面这段css代码来让文字超出范围隐藏并显示省略号:
overflow: hidden; /*超出的文本隐藏*/
text-overflow: ellipsis; /* 溢出用省略号*/
display: -webkit-box; /*作为弹性伸缩盒子模型显示*/
-webkit-line-clamp: 1; /*显示的行数;如果要设置2行加...则设置为2*/
-webkit-box-orient: vertical; /*伸缩盒子的子元素排列:从上到下*/
本地运行的时候是没有问题的,但是build之后发现失效了;发现是 -webkit-box-orient: vertical; 没有起效。
解决方案:
display: -webkit-box;
-webkit-line-clamp: 1;
overflow: hidden;
text-overflow: ellipsis;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
以上是本章全部内容