el-table中表格内容使用el-tooltip并在指定位置换行

先看效果：

 

//后端接口可以返回两个数据，一个带换行符，一个不带
<el-table-column prop="respInfo" label="责任人" align="center" min-width="100px">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" placement="top">
            <div slot="content">
              <div v-html="scope.row.respInfoTemp"></div>
            </div>
            <div class="ellipsis">{{scope.row.respInfo}}</div>
          </el-tooltip>
        </template>
</el-table-column>


// css文字超出...
/deep/ .ellipsis {
  white-space: nowrap; /* 确保文本不换行 */
  overflow: hidden; /* 隐藏超出容器的文本 */
  text-overflow: ellipsis; /* 显示省略号 */
}

数据结构（有换行符）：1、这是第一行；<br>2、这是第二行；<br>3、想在哪换行就在哪加换行符；

数据结构（表格中显示的）：1、这是第一行；2、这是第二行；3、想在哪换行就在哪加换行符；

换行符：<br>