elementui el-tooltip文字提示组件弹出层内容格式换行处理-第二种

2.1 效果图

2.2 代码

<el-table-column align="center" label="备注">
 <template slot-scope="scope">
    <el-tooltip v-if="!isEdit" placement="top">
      <div slot="content">
        <div v-html="remarkHTML(scope.row.remark)" />
      </div>
      <div class="remark-txt" v-html="remarkHTML(scope.row.remark)"></div>
    </el-tooltip>
    <el-input
      v-if="isEdit"
      type="textarea"
      :autosize="{ minRows: 1, maxRows: 9}"
      placeholder="请输入备注"
      v-model="scope.row.remark">
    </el-input>
  </template>
</el-table-column>

data() {
	return {
		isEdit: false,
	}
},
/** 备注 */
remarkHTML(remark) {
  // return remark.replace(/\r\n/g, '<br/>').replace(/\n/g, '<br/>').replace(/\s/g, ' ');
  if (remark) {
    return remark.replace(/\n|\r\n/g, '<br>').replace(/ /g, '  ')
  }
  return ''
},

.remark-txt {
  -webkit-line-clamp: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}