版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/csl125/article/details/83182244
css的基础属性 :
overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
white-space:nowrap; //溢出不换行,只能显示一行
css3属性 :
display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
-webkit-line-clamp:2; //这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。
CSS文本超出2行就隐藏并且显示省略号,代码如下 :
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
实现单行居中，两行居左，超过两行省略
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
display:inline-block;
text-align:left;
}
span{
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
text-overflow:ellipsis;
}
div{
border: 1px solid red;
font-size: 30px;
text-align:center;
width: 800px;
height: 500px;
}
</style>
</head>
<body>
<div>
<p><span>单行居中，多行居左</span></p>
</div>
</body>
</html>