文本省略的方法

在列表页对商品介绍时，经常需要对商品进行简略描述，如果将多余一行的文字用省略号代替呢？以下是笔者试过的两种可行方案：

方法一

-webkit-line-clamp: 1; //省略行数 可设置其他值
display: -webkit-box;
word-break: break-all;
overflow: hidden;
-webkit-box-orient: vertical;

方法二

  <style>
    .line{
      display: inline-block;
      width: 50px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  //多行
    .multi-line {
      display: -webkit-box;
      width: 50px;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
  </style>
  <div class="line">
    单行文本省略样例
  </div>
  <div class="multi-line">
    多行文本省略样例
  </div>