css实现多行文字省略号失效

问题

在react项目中遇到过这么个问题,一般我们通过下面的css属性都能实现多行省略,但是在react却会失效

     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
     overflow: hidden;
     word-break: break-all;

测试了半天才发现 -webkit-box-orient: vertical; 这个属性react无法解析,所以我们可以将它写在内联样式中,如下所示

	<div className="content" style={{ WebkitBoxOrient: "vertical" }}>
	</div>

那么,就不能用css解决了吗?不,万能百度告诉我们,也可以这么实现

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

经测试都能完美生效

猜你喜欢

转载自blog.csdn.net/qq_36990322/article/details/88953633