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

1、第一种

1.1 效果图

1.2、代码

<template>
	<div class="wrapper">
	  <el-tooltip class="content" effect="dark" placement="top">
	     <div slot="content">
	       <div v-html="getTextBrStr(text)">div>
	     div>
	     <div>{{text}}div>
	   el-tooltip>
	 div>
template>

export default {
	data() {
		return {
			text: '11111111111111111111111111111、2222222222222222222222222222222222222、33333333333333333333333333333、44444444444444444444444444444444444、55555555555555555555555555555555、6666666666666666666666666666666666、7777777777777777777777777777777777、88888888888888888888888888888888888、99999999999999999999999999999999999、101010101010101010101010101010、000000000000000000000000000000、121212121212121212121212121212121212121212、1313131313131313131313131313131313',
		}
	},
	methods: {
		// 第一种方式
		getRepairedOrderNosBrStr(text) {
	      let str = ''
	      if (text && text.length) {
	        for (let i = 0; i < text.length; i++) {
	          str += text[i];
	          // 在字符串的指定位置，将数据进行换行展示
	          if (i % 132 === 131) { // 检查是否是指定倍数的位置
	            str += '
'
	          }
	        }
	      }
	      return str
	    },
	}
}

2、第二种

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, '
').replace(/\n/g, '
').replace(/\s/g, ' ');
  if (remark) {
    return remark.replace(/\n|\r\n/g, '
').replace(/ /g, '  ')
  }
  return ''
},

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