css实现文本单行居中多行省略

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    p {
      display: inline-block;
      text-align: left;


    }
    h2{
      text-align: center;
      width: 400px;
    }
    em{
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  </style>
</head>
<body>

<h2><p><em>单行居中，多行居左</em></p></h2>

</body>
</html>

嵌套3层元素给最内层的元素设置

display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical

css实现文本单行居中 多行省略

css实现文本单行居中多行省略