一行文字居中，多行文字左对齐★★

<div class="content">
  <p>dsc</p>
</div>


<style>
/*当文字为一行是，则P的宽度小于div的宽度，p标签居中显示在盒子内，文字也就居中了 ;当大于一行时，P的宽度和div的宽度是一致的 ,文字就居左对齐了*/
  .content {
    width:150px;
    text-align:center;
  }

  /*display: inline-block使P的宽度根据文字的宽度伸缩 */
  .content p {
    display:inline-block;
    text-align:left;
  }
</style>

2.flex 方式

<div class="box">
  <div class="linetwo">12wsd</div>
</div>


<style>
.box {
  width:200px;
  height:100px;

  display:flex;
  justify-content:center;
  flex-direction: column;
  <!-- white-space:pre-wrap; -->
}

.lineTwo {
  text-overflow: -o-ellipsis-lastline;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
}
</style>

3.方式三

<div>
     <p><span>单行居中，多行居左</span></p>
 </div>

 <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>