vue elementui tooltip 内容省略以及字数过滤

表格方法

<el-table-column
 width="130"
  prop="operationDescription"
  header-align="center"
  align="center"
  label="描述">
  <template slot-scope="scope">
    <el-tooltip :content="scope.row.operationDescription" placement="top">
      <p class="showOverTooltip">{{scope.row.operationDescription | ellipsis }}</p>
    </el-tooltip>
  </template>
</el-table-column>

表单方法

<el-tooltip :content="item.problemTitle" placement="top">
	<div class="showOverTooltip">
		<span style="background: #999;width: 3px;height: 3px;border-radius: 50%;display: inline-block;margin:5px 3px 3px 0;"></span>
	  <span style="color:#409eff;cursor:pointer;">{{ item.problemTitle | ellipsis }}</span>
	  <span style="margin-left:5px;float: right;">{{ item.replyNum }}个回答</span>
	</div>
</el-tooltip>

js部分

//过滤器
//根据字数过滤
filters: {
  ellipsis(value) {
    if (!value) return "";
    if (value.length > 69) {
      return value.slice(0, 69) + "...";
    }
    return value;
  }
},

css部分

.showOverTooltip{
  display:-webkit-box;
   text-overflow:ellipsis;
   overflow:hidden;
     /*这里是3行*/
   -webkit-line-clamp: 3;
   -webkit-box-orient:vertical;
 }