前端css文字单行和两行超出变为省略号解决方案@莫成尘

先看代码，复制使用即可，css样式在本身提供的特别多的能力，但我仍以为很多前端开发者并不精深于研究css，这里提供一个超出隐藏的demo，让您可以很轻松应对。（您将看到以下效果）

两行省略

word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 50px;/* 需要注意的是 如果是两行省略 需要添加比如
 line-height或者其他属性老保证这两行文字站位高度为盒子高度的一半 */
width: 500px;
height: 100px;

单行省略

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 500px;
height: 100px;

以上就是超出省略属性的特点
其他有关css的疑问或者此方法不理解的地方您可留言，我会尽快回复并帮您解决。