css实现文本单行和多行省略

<template>
  <div class="home">
    <h1>单行超出省略</h1>
    <div class="oneRow">
      挖看到我岛外福娃放假哦哇哦IG澳网狗娃拍个【哇【刚卡顽皮狗颇为工卡我公婆爱我公婆挖破更怕玩股票未公开怕我股票公婆挖破口跟外婆喷我看爬开给我破万挖看到我岛外福娃放假哦哇哦IG澳网狗娃拍个【哇【刚卡顽皮狗颇为工卡我公婆爱我公婆挖破更怕玩股票未公开怕我股票公婆挖破口跟外婆喷我看爬开给我破万挖看到我岛外福娃放假哦哇哦IG澳网狗娃拍个【哇【刚卡顽皮狗颇为工卡我公婆爱我公婆挖破更怕玩股票未公开怕我股票公婆挖破口跟外婆喷我看爬开给我破万挖看到我岛外福娃放假哦哇哦IG澳网狗娃拍个【哇【刚卡顽皮狗颇为工卡我公婆爱我公婆挖破更怕玩股票未公开怕我股票公婆挖破口跟外婆喷我看爬开给我破万
    </div>
    <h1>多行超出省略</h1>
    <div class="nRow">
      挖看到我岛外福娃放假哦哇哦IG澳网狗娃拍个【哇【刚卡顽皮狗颇为工卡我公婆爱我公婆挖破更怕玩股票未公开怕我股票公婆挖破口跟外婆喷我看爬开给我破万挖看到我岛外福娃放假哦哇哦IG澳网狗娃拍个【哇【刚卡顽皮狗颇为工卡我公婆爱我公婆挖破更怕玩股票未公开怕我股票公婆挖破口跟外婆喷我看爬开给我破万
      挖看到我岛外福娃放假哦哇哦IG澳网狗娃拍个【哇【刚卡顽皮狗颇为工卡我公婆爱我公婆挖破更怕玩股票未公开怕我股票公婆挖破口跟外婆喷我看爬开给我破万挖看到我岛外福娃放假哦哇哦IG澳网狗娃拍个【哇【刚卡顽皮狗颇为工卡我公婆爱我公婆挖破更怕玩股票未公开怕我股票公婆挖破口跟外婆喷我看爬开给我破万
      挖看到我岛外福娃放假哦哇哦IG澳网狗娃拍个【哇【刚卡顽皮狗颇为工卡我公婆爱我公婆挖破更怕玩股票未公开怕我股票公婆挖破口跟外婆喷我看爬开给我破万挖看到我岛外福娃放假哦哇哦IG澳网狗娃拍个【哇【刚卡顽皮狗颇为工卡我公婆爱我公婆挖破更怕玩股票未公开怕我股票公婆挖破口跟外婆喷我看爬开给我破万
      挖看到我岛外福娃放假哦哇哦IG澳网狗娃拍个【哇【刚卡顽皮狗颇为工卡我公婆爱我公婆挖破更怕玩股票未公开怕我股票公婆挖破口跟外婆喷我看爬开给我破万挖看到我岛外福娃放假哦哇哦IG澳网狗娃拍个【哇【刚卡顽皮狗颇为工卡我公婆爱我公婆挖破更怕玩股票未公开怕我股票公婆挖破口跟外婆喷我看爬开给我破万
    </div>
  </div>
</template>

<script>
export default {};
</script>
<style scoped>
//单行省略
.oneRow {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
//多行省略
.nRow {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  //省略的行数
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>

效果：