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

1、第一种

1.1 效果图

1.2、代码

html 复制代码
<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>
js 复制代码
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 += '<br/>'
	          }
	        }
	      }
	      return str
	    },
	}
}
css 复制代码
<style lang="scss" scoped>
 .wrapper {
   min-height: 30px;
   padding: 5px 15px;
   color: #606266;
   border: 1px solid #DCDFE6;
   border-radius: 4px;
   .contentt {
     word-break: break-all;
     -webkit-line-clamp: 2;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     overflow: hidden;
     text-overflow: ellipsis;
   }
 }
</style>

2、第二种

2.1 效果图


2.2 代码

html 复制代码
<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>
js 复制代码
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 ''
},
css 复制代码
.remark-txt {
  -webkit-line-clamp: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
相关推荐
程序员爱钓鱼1 小时前
Go语言实战案例 — 项目实战篇:简易博客系统(支持评论)
前端·后端·go
excel8 小时前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着8 小时前
全栈框架next.js入手指南
前端·next.js
你的人类朋友10 小时前
什么是API签名?
前端·后端·安全
会豪12 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子12 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶12 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子12 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_12 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
小徐_233312 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts