多余文字隐藏用省略号代替

一，多行文字隐藏用省略号代替

border:1px solid #ddd;

width: 200px;

word-break: break-all;

text-overflow: ellipsis;

display: -webkit-box; /** 将对象作为伸缩盒子模型显示/

-webkit-box-orient: vertical; /设置或检索伸缩盒对象的子元素的排列方式/

-webkit-line-clamp: 3; /显示的行数/

overflow: hidden; /隐藏超出的内容 */

二，单行文字隐藏用省略号代替

width: 50px;

height: 5px;

overflow: hidden;

white-space:nowrap;/不显示的地方用省略号…代替/

text-overflow:ellipsis;/支持 IE */

-webkit-line-clamp: 3;

三，但是在React项目之中不生效是因为在react编译后没有-webkit-box-orient: vertical;

解决方法是添加行内样式：

<p style={{"WebkitBoxOrient": "vertical"}}>React多行文本省略</p>