css 文字（单行居中 超出居左 || 单行文本省略 多行文本省略）

一. 单行文本居中，多行文本居左

    <div class="textBox">
      <p class="text">单行文本居中</p>
      <p class="text">多行文本居左多行文本居左多行文本居左</p>
    </div>

.textBox {
  border: 1px solid aqua;
  width: 200px;
  text-align: center;
  .text {
    display: inline-block;
    text-align: left;
  }
}

二.单行文本省略 多行文本省略

 <div class="textBox">
      <p class="text1">这是单行文本省略这是单行文本省略</p>
      <p class="text2">
        这是多行文本省略这是多行文本省略这是多行文本省略这是多行文本省略这是多行文本省略这是多行文本省略
      </p>
    </div>

.textBox {
  border: 1px solid aqua;
  width: 200px;

  .text1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .text2 {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 行数 */
    -webkit-box-orient: vertical; /* 垂直方向 */
    overflow: hidden; /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 超出部分用省略号表示 */
  }
}