我们在排版布局是,经常会遇到文字省略效果,例如
单行省略
//记得要有宽度,默认宽度也可以
.g-text-ove1{
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
多行省略
//一般情况下没问题
.g-text-ove2{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
word-break: break-all;
}
多行省略失效问题
//第一种情况主要用于兼容,添加这句话 代表删除老的无效代码,且添加新的代码
/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
//第二种情况,在微信小程序中 使用了scroll-view
//原因是:scroll-view为了能够横向滚动设置了white-space: nowrap (文本不会换行,文本会在在同一行上继续,直到遇到标签为止。)
// 解决办法:在里面的元素设置
white-space:normal