vue 使用el-table的中的tooltip如何换行显示

如图：

tooltip提示时，显示了很长的内容，即使我使用了<br/>也无济于事。如何才能使用它换行呢。show-overflow-tooltip是肯定实现不了，它显示的就是普通文本。需要我们自己去写。

如图：

<template slot-scope="scope">
              <el-tooltip class="item" effect="dark" placement="top">
                <div v-html="scope.row.material_id" slot="content"></div>
                <div class="oneLine">{{scope.row.material_id}}</div>
              </el-tooltip>
            </template>

css样式：

<style lang='scss'>
.oneLine {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>