// 一行
 width: 150px;
 white-space:nowrap;
 overflow:hidden;
 text-overflow:ellipsis;

  // 两行或多行
  width: 1100px;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

最后可以设置一个 title 属性 来展示隐藏的文字

// 当title对应的data值只有一个的时候
<div class="right-box-people-font" :title="name"> {{ name }} </div>

// 当title需绑定的data值存在多个的时候，用模板字符串拼接
 <div class="groupContent" :title="`${item.dutyName}${item.dutyPhone}${item.deptName}`">
          {{ item.dutyName }}
    <span style="margin: 0 10px">
          {{ item.dutyPhone }}
    </span>
          {{ item.deptName }}
 </div>

注：element-ui el-table 可以使用show-overflow-tooltip属性，它接受一个Boolean，为true时多余的内容会在 hover 时以 tooltip 的形式显示出来。