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 += '<br/>'}}}return str},}
}
<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 代码

<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-inputv-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;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/845324.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

centOS 编译C/C++

安装C和C编译器 yum -y install gcc*查看CenterOS系统信息 cat /etc/system-releaseCentOS Linux release 8.2.2004 (Core)查看gcc版本 gcc --versiongcc (GCC) 8.5.0 20210514 (Red Hat 8.5.0-4) Copyright (C) 2018 Free Software Foundation, Inc. This is free software…

深入理解同步与异步编程:从概念到实践

导言&#xff1a; 在软件开发中&#xff0c;同步和异步是两种常见的编程模式。深入理解这两种模式的工作原理对于提高代码的效率和性能至关重要。本文将从概念、原理和实践三个方面介绍同步和异步编程&#xff0c;帮助读者更好地理解和应用这两种编程模式。 同步编程&#xf…

ai虚拟主播自动切换的实现

前段时间,看到b站突然冒出很多ai主播,输入数字切换小姐姐.感觉挺有趣.思考了以下决定手动实现一下. 然后就陷入长达5天的踩坑中 由于是自建的webrtc服务器,很自然的想直接收流转发,这也是最优的方案, 然而实际上遇到许多不是很友好的bug, 然后再想使用rtp转发,依然不理想. 最后…

低代码开发:助企构建数字化应用平台

随着信息技术的快速发展&#xff0c;数字化应用平台已经成为企业提升竞争力、实现业务创新的关键。然而&#xff0c;传统的应用开发方式往往面临着开发周期长、成本高昂、技术门槛高等问题&#xff0c;这使得许多企业望而却步。而低代码开发技术的出现&#xff0c;为企业构建数…

【第十二节】C++控制台版本贪吃蛇小游戏

目录 一、游戏简介 1.1 游戏概述 1.2 实现功能 1.3 开发环境 二、实现设计 2.1 C类的设计 2.2 项目结构 2.3 代码设计 三、程序运行截图 3.1 游戏界面 3.2 自定义地图 3.3 常规游戏界面 一、游戏简介 1.1 游戏概述 本游戏是一款基于C语言开发的控制台版本贪吃蛇游…

cwiseMax、cwiseMin函数

一、cwiseMax含义 cwiseMax是Eigen库中的一个函数&#xff0c;用于求两个矩阵或向量的逐元素最大值。它的作用类似于std::max函数&#xff0c;但是可以同时处理多个元素&#xff0c;且支持矩阵和向量。 举例&#xff1a; 例如&#xff0c;对于两个向量a和b&#xff0c;cwiseMax…

Python中的魔法函数

大家好&#xff0c;Python作为一种高级编程语言&#xff0c;以其简洁、优雅和易读性而闻名。然而&#xff0c;Python的强大之处不仅仅在于其语法的简洁性&#xff0c;还在于其灵活的面向对象编程范式。在Python中&#xff0c;有一类特殊的方法被称为“魔法函数”&#xff0c;它…

神器!!Python热重载调试【送源码】

在 Python 开发的路上&#xff0c;调试是我们不可避免的一环。 而今天推荐的开源项目Reloadium &#xff0c;让你在不重启程序的情况下实现代码的即时更新和调试。 &#x1f504; Reloadium 功能亮点&#xff1a; 1. 热重载魔法&#xff1a; Reloadium 不仅仅能够实现代码的…

电脑缺失msvcp120.dll要如何解决,学会这七个方法,轻松摆脱困扰

msvcp120.dll 是 Microsoft Visual C 2013 运行时库的一部分&#xff0c;它提供了 C 标准库的实现&#xff0c;使得开发者能够利用丰富的 C 功能来构建复杂的应用程序。这个文件对于使用了 C 标准库的应用程序来说是必不可少的。当这些应用程序运行时&#xff0c;它们会动态链接…

Docker管理工具Portainer忘记admin登录密码

停止Portainer容器 docker stop portainer找到portainer容器挂载信息 docker inspect portainer找到目录挂载信息 重置密码 docker run --rm -v /var/lib/docker/volumes/portainer_data/_data:/data portainer/helper-reset-password生成新的admin密码&#xff0c;使用新密…

Ubuntu安装GCC编译器

GCC编译器安装 GCC编译器安装切换软件源(换成国内的服务器)1 、创建一个文本文档并命名为“sources.list”2 、复制软件源列表清华源:阿里源:3 、把修改之后的.list 文件覆盖原有的文件4 、更新软件列表5 、安装6 、检查是否安装成功7、GCC 编译器:GCC编译器安装 这里演示…

cdo | 常用命令

整理一下平时经常会使用的cdo命令 如何来更改netcdf数据中的变量名呢&#xff1f; 假设我现在有一个sst月平均数据,希望将里面的变量名称sst修改为sst_new netcdf oisst_monthly { dimensions:lat 180 ;lon 360 ;time UNLIMITED ; // (476 currently)nbnds 2 ; variable…

【PTA】7-4 朋友圈(C++ * 并查集思想)代码实现 一点反思

题目如下&#xff1a; AC代码如下&#xff08;参考PTA 7-2 朋友圈&#xff08;25 分&#xff09;_处理微信消息pta-CSDN博客&#xff09; #include<bits/stdc.h> using namespace std; #define sz 30005 typedef struct node{int rk, fa; }Node; Node tree[sz]; void In…

STL:copy简介

STL:copy STL算法&#xff1a;copy std::copy()函数使用 std::copy 函数在 中声明&#xff0c;属于变易算法(Modifying sequence operations)&#xff0c;主要用于实现序列数据的复制 template <class InputIterator, class OutputIterator>OutputIterator copy (InputI…

【SQL学习进阶】从入门到高级应用(九)

文章目录 子查询什么是子查询where后面使用子查询from后面使用子查询select后面使用子查询exists、not existsin和exists区别 union&union alllimit &#x1f308;你好呀&#xff01;我是 山顶风景独好 &#x1f495;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面…

【IB Protocal Serial--WQE】

IB Protocal Serial--WQE 1 Intro1.1 What1.2 IBA WQE 本系列文章介绍RDMA技术的具体实现–InfiniBand Protocal&#xff1b; Introduce the features, capalities,components, and elements of IBA. the principles of operation. 1 Intro 1.1 What 理解IB协议下面这三句话对…

CSS--学习

CSS 1简介 1.1定义 层叠样式表 (Cascading Style Sheets&#xff0c;缩写为 CSS&#xff09;&#xff0c;是一种 样式表 语言&#xff0c;用来描述 HTML 文档的呈现&#xff08;美化内容&#xff09;。 1.2 特性 继承性 子级默认继承父级的文字控制属性。层叠性 相同的属性…

基于RFID技术的烟草在线监测系统在烟草仓库温湿度监测中的应用。

在现代工业生产中&#xff0c;精准高效的在线监测系统对于产品质量控制至关重要。尤其是在高价值且对环境敏感的产品制造过程中&#xff0c;如烟草加工&#xff0c;实时准确的数据采集与分析直接关系到最终产品的品质及安全标准达标程度。 烟草行业在我国属于传统轻工业之一&am…

linux fork()函数调用原理

在Linux中&#xff0c;fork函数用于创建一个新的进程&#xff0c;该进程是调用进程的子进程。fork函数的实现涉及用户态和内核态之间的交互。下面我将详细说明fork函数在代码流程中的原理和用户态与内核态的交互过程。 用户态调用fork函数: 用户程序调用fork函数&#xff0c;…

Vite项目构建chrome extension,实现多入口

本项目使用Vite5 Vue3进行构建。 要使用vite工程构建浏览器插件&#xff0c;无非就是要实现popup页面和options页面。这就需要在项目中用到多入口打包&#xff08;生成多个html文件&#xff09;。 实现思路&#xff1a; 通过配置vite工程&#xff0c;使得项目打包后有两个h…