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;
}
相关推荐
yddddddy20 分钟前
css的基本知识
前端·css
昔人'23 分钟前
css `lh`单位
前端·css
前端君1 小时前
实现最大异步并发执行队列
javascript
Nan_Shu_6142 小时前
Web前端面试题(2)
前端
知识分享小能手2 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队3 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光3 小时前
css之一个元素可以同时应用多个动画效果
前端·css
萌萌哒草头将军3 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
huangql5204 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
Qlittleboy4 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app