省略号 - 单行

.singe-line {
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    white-space: nowrap;
  }

  <p>单行省略</p>
  <div class="singe-line box" :title="content">
    {{ content }}
  </div>

省略号 - 两行

.double-line {
    word-break: break-all;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  <p>两行省略</p>
  <div class="box">
    <div class="double-line" :title="content2">
      {{ content2 }}
    </div>
  </div>

超过元素宽高省略

需要设置元素宽度与高度,根据高度看下最多能放几行,再设置-webkit-line-clamp的值为最大行数

.over-line {
    height: 65px;
    word-break: break-all;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
  <p>超过元素宽高省略</p>
  <div class="box">
    <div class="over-line" :title="content">
      {{ content }}
    </div>
  </div>