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

一,多行文字隐藏用省略号代替
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;
解决方法是添加行内样式:

React多行文本省略

你可能感兴趣的:(css)