<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本</title>
<style>
body{
width: 200px;
}
div{
text-align: center;
}
p{
display: inline-block;
text-align: left;
}
span{
display: -webkit-box; /*设置display，将对象作为弹性伸缩盒子模型显示*/
-webkit-line-clamp: 2; /*限制在一个块元素显示的文本的行数*/
-webkit-box-orient: vertical; /*规定框的子元素应该被水平或垂直排列*/
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div>
单行居中
</div>
<div>
<p>
单行居中，2行居左。
单行居中，2行居左。
</p>
</div>
<div>
<p>
<span>
单行居中，2行居左。超过2行省略。
单行居中，2行居左。超过2行省略。
单行居中，2行居左。超过2行省略。
单行居中，2行居左。超过2行省略。
</span>
</p>
</div>
</body>
</html>
