vue+elementui項目，table項內容超過確定行以“...”顯示剩余部分的實現

<el-table-column slot="tbiMemo" label="廠商介紹" align="left" minWidth="250px">
    <template slot-scope="scope">
          <div class="showInline">{{ scope.row.tbiMemo }}</div>
    </template>
</el-table-column>

 

1、超過兩行以“...”顯示剩余部分

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

 

.class {
  overflow: hidden;
  display: -webkit-box;
  word-break: break-all;
  font-weight: 900;
  text-overflow: ellipsis;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /*! autoprefixer: on */
  -webkit-line-clamp: 2;
}

　但是以上做法會造成下面這樣，

　

如果沒有特定要求的話，你可以使用單行顯示，文本超過溢出以“...”

顯示

  .showInline {
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap
  }