1、单行文字溢出显示省略号
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
2、多行文字溢出显示省略号
/* 多行溢出文字显示省略号五部曲 */
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 3表示在第三行显示省略号*/
-webkit-line-clamp: 3;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
多行溢出,浏览器可以正常解析-webkit-box-orient: vertical;
但是编译后发现,页面上并没有显示...,打开F12发现,-webkit-box-orient: vertical;并没有解析出来,好了,遇到坑了,经过编译后就把-webkit-box-orient: vertical干掉了
然后找了两个结局方案:
1.可以解决,但是会在编译过程中报warning
/* autoprefixer: off*/
-webkit-box-orient: vertical;
/* autoprefixer: on*/
2.找到配置文件webpack.config.js文件,注释掉一下代码
new OptimizeCSSPlugin({
cssProcessorOptions: config.build.productionSourceMap
?
:
}),
这个我不敢注释,毕竟是之前项目,咱们能不改就不改
3.好像行不通,但是别人说可以
/* autoprefixer: ignore next */
-webkit-box-orient: vertical;
4.css行内写法,可以搞定
<span style={{ '-webkit-box-orient': 'vertical' }}>你好! </span>