css3文本多行省略
<!DOCTYPE html>
<html>
<head>
<title>多行换行</title>
<style type="text/css">
div{
/*overflow溢出元素框，发生什么
hidden内容剪裁，余下内容不可见
scroll 内容剪裁，显示滚动条
visible默认值 不会剪裁，显示在元素框外 */
overflow: hidden;
/*如果要做到多行换行 需要使用一个webkit内核专用的属性-webkit-line-clamp来设置行数
用其设置行数的时候还要使用-webkit-box-orient来设置行的方向
同样也要使用display:-webkit-box来把这个元素设置成webkit类型的盒子模型*/
/*如果在做多行换行的时候建议不要设定死的高，如果设置了那么设置的高就要设置成能完整显示文本的高度
建议是不设定高度*/
height: 53px;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
}
</style>
</head>
<body>
<div>welcom to qingyun welcom to qingyun welcom to qingyun welcom to qingyun welcom to qingyun welcom to qingyun welcom to qingyun welcom to qingyun welcom to qingyun welcom to qingyun welcom to qingyun</div>
</body>
</html>
