css 限制长度 多余部分省略

2/10/2017来源:心得技巧人气:1993

单行

.class1{     width: 200px;     text-overflow: ellipsis;      overflow: hidden;  /** 隐藏超出的内容 **/     } 

如果文本是英文的话,上面的CSS就可以了。如果文本是中文的话还要加上white-space:nowrap;规定文本不自动换行。

这个也是我测试的时候偶然发现的。。

多行

.class2{    width: 200px;    Word-break: break-all; /**换行**/    text-overflow: ellipsis; /**超出部分省略号**/    display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/    -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/    -webkit-line-clamp: 3; /** 显示的行数 **/    overflow: hidden;  /** 隐藏超出的内容 **/    }