Element不能自动换行,内容依然超出,直到遇见空格自动换行

2023-05-16

我一个前端技术小白,不会前端,没办法,只能使用别人做好的框架。

在最近项目使用Element,需求是要显示日志,日志表格中显示一串SQL。但是,在使用过程中,发现字符串过长,表格显示起来不美观,便用了“show-overflow-tooltip”,但是字符串过长,并没有自动换行。我就改用了弹出框, 对话框, 展开行等方式展示数据,字符串还是如此。如上图所示一样,理想上显示在细线范围的弹出框中,但现实却是字符串没有空格不能自动换行。

问题展示: 点击 “异常信息”下的“点击查看详细”按钮,弹出的“弹出框”中内容有超出。细线方框为理想状态,粗线方框为现实状态。

 

解决:在弹出框中加入了一个div,并设置div属性为强制换行。下面贴上代码。

下面为 html代码:在显示“弹出框”中,将要显示的内容包裹在 div 中

<el-table-column :label="tableColLabel['exceptionMsg']" min-width="150">
	<template slot-scope="props">
		<el-popover placement="bottom"
			title="异常信息"
			width="600"
			trigger="click"
			content="">
			<div class="divcss555">
				{{ props.row.exceptionMsg }}
			</div>
			<el-button slot="reference">点击查看详细</el-button>
		</el-popover>
	</template>
</el-table-column>

下面是js代码,设置 div 强制换行

    <style>
        .divcss555 {
            border: 1px solid #F00;
            width: 600px;
            height: 100px;
            word-break: break-all;
        } 
    </style>

最后是效果展示

其他的换行也和这个相似

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Element不能自动换行,内容依然超出,直到遇见空格自动换行 的相关文章

  • Ubuntu20.04安装anaconda

    1 下载anaconda 官网链接 xff1a Anaconda Anaconda Distribution 直接选择Download xff0c 他会自动识别系统下载最新的版本 2 安装anaconda 进入下载文件夹 xff0c 运行安
  • 终于有人把SDH、MSTP、OTN和PTN的关系解释清楚了

    在开始之前 xff0c 先要解释一下TDM的概念 TDM xff0c 就是时分复用 xff0c 就是将一个标准时长 xff08 1秒 xff09 分成若干段小的时间段 xff08 8000 xff09 xff0c 每一个小时间段 xff08
  • 使用Visual Studio 2022运行C++代码

    使用Visual Studio 2022运行C 43 43 代码 1 打开VS 2022 xff0c 创建新项目 2 安装多个工具和功能 3 选中 使用C 43 43 的桌面开发 和 通用Windows平台开发 xff0c 点击修改 xff
  • Windows远程麒麟桌面操作系统、相互远程桌面的设置方法(一)

    前言 VNC Virtual Network Computing 是进行远程桌面控制的一个软件 客户端的键 盘输入和鼠标操作通过网络传输到远程服务器 xff0c 控制服务器的操作 服务器的图形 界面通过网络传输到客户端显示给用户 就像直接在
  • shell 中bad substitution错误

    今天在学习linux写shell脚本的时候 xff0c 碰到了一个bad substitution错误 脚本的内容是输入一个文件名 xff0c 创建出三个文件名 43 日期 xff08 今天 xff0c 昨天 xff0c 前天 xff09
  • 关于自增自减的理解

    自增运算符 43 43 xff1a 自增运算符 xff0c 也是一元运算符 作用 xff1a 与变量配合使用 xff0c 使得变量加一或减一 前置自增 xff1a 自增运算符在变量的前面 后置自增 自增运算符在变量的后面 前置自增和后置自增
  • CentOS安装NodeJS

    CentOS安装NodeJS 在CentOS下安装NodeJS有以下几种方法 使用的CentOS版本为7 2 CentOS其他版本的NodeJS安装大同小异 xff0c 也可以参看本文的方法 安装方法1 直接部署 1 首先安装wget yu
  • 无法打开“windows.h”文件、无法打开“kernel32.lib”文件解决方法

    无法打开 windows h 文件的解决做法 xff1a 在VS2008下的option VC 43 43 目录 添加包含文件路径中 xff0c 添加windows SDK目录 xff0c 例如这个 xff0c C Program File
  • ubuntu 搜索安装包的命令

    1 sudo apt cache search XXX
  • ubuntu让开机就打开蓝牙

    我的ubuntu默认就有蓝牙功能 xff0c 也可以用 xff0c 但每次重启就很要重新打开蓝牙 xff0c 很烦恼 xff0c 解决办法如下 xff1a 1 sudo apt get install blueman bluez 2 vim
  • 【百度OCR】java调用百度OCR接口实现文字识别

    百度智能云文字识别 https ai baidu com 创建应用 参考博客 xff1a Java基于百度API接口实现智慧文字识别 百度AI开放平台 xff0c 文字识别接口 获取access token 百度AI 对接百度AI 增值税发
  • 使用某个用户登录命令:kinit adminad

    使用某个用户登录命令 xff1a kinit admin admin 票据生成方法 xff1a hdfs 票据 su hdfs klist hdfs rdspproduction 64 CARS COM 票据 然后切换到155机器 执行 s
  • Python3+Selenium框架搭建

    Webdriver概述 Webdriver Selenium2 xff09 是一种用于Web应用程序的自动测试工具 xff0c Thoughtworks公司一个强大的基于浏览器的开源自动化测试工具 xff0c 通常用来编写web应用的自动化
  • 算法题1:字符序列交换(阿里巴巴笔试题)

    题目 xff1a 若初始序列为gbfcdae xff0c 那么至少需要多少次两两交换 xff0c 才能使该序列变为abcdefg xff1f 任给一个自由a g这7个字母组成的排列 xff0c 最坏的情况下需要至少多少次两两交换 xff0c
  • 写给前端的 Nest.js 教程——10分钟上手后端接口开发

    前言 这个教程的所有代码我都放在了我的 GitHub 仓库 xff1a Nest CRUD Demo 1 xff0c 欢迎大家点个 Star xff01 框架简介 Nest 是一个用于构建高效 xff0c 可扩展的 Node js 服务器端
  • NSPredicate谓词搜索使用小记

    iOS中的搜索正常情况下用NSPredicate都足以解决问题 比如我们有一个原数组 dataArraty NSPredicate predicate 61 NSPredicate predicateWithFormat 64 span c
  • extern和volatile的用法

    extern 的用法 extern的用法的对象主要是变量和函数 用extern声明外部变量 什么是外部变量 外部变量是指在文件或者函数外部定义的全局变量 外部变量仅定义一次并且在所有的函数之外 在一个文件内使用外部变量 作用域 xff1a
  • 抽象数据类型定义(ADT)

    一 抽象数据类型定义 xff08 ADT xff09 作用 xff1a 抽象数据类型可以使我们更容易描述现实世界 例 xff1a 用线性表描述学生成绩表 xff0c 用树或图描述遗传关系 定义 xff1a 一个数学模型以及定义在该模型上的一
  • Keil串口仿真调试

    用到的软件 Keil开发软件 虚拟串口软件 串口调试小助手 软件介绍 1 虚拟串口软件 对于笔记本电脑来说 xff0c 没有自带串口使用虚拟串口软件可以模拟真实的串口 程序可以利用虚拟串口与其他串口交换数据 Virtual Serial P
  • Qt学习之路【5】:静态Qt库下SQLite数据库无法加载驱动(QSQLITE driver not loaded)

    使用的Qt库 Qt4 8 6 交叉编译工具链 xff1a arm linux gcc 4 3 6 这个问题纠结了好久 刚开始我使用的是Qt的动态库 xff0c 没有出现这个问题 现在使用的是Qt的静态库出现了这个问题 xff1a QSqlD

随机推荐

  • 【群晖nas】阿里域名DDNS 配置外网访问(华硕AC68U路由端口映射)

    拓扑图 友情提示 xff1a 其实 xff0c 华硕的路由是提供了免费域名的 具体步骤 确保路由器的WAN口IP为公网地址 在 路由器管理 系统设置 界面 xff0c 允许 从互联网设置RT AC88U 步骤1 高级设置 系统管理 系统设置
  • 使用"conn / as sysdba"登录时报出"insufficient privileges"错的问题

    1 xff09 conn as sysdba 的认证方式 oracle数据库的三种登录验证方式 xff1a 操作系统身份认证 密码文件认证 数据库认证 而conn as sysdba是属于操作系统认证 原理 xff1a 电脑开机时登录的用户
  • 数码管消影问题总结

    1 消影方法1 先送段选数据后送位选数据时 xff0c 需要在中间加入一条语句P0 61 0xff 作用是消影 现在来分析一下是怎样 产生影的 xff1f 当dula 61 0后锁住了P0口的数据 xff0c 即P0口仍然保持着上次的段选数
  • 【linux学习】ubuntu下挂载window共享文件

    ubuntu下挂载window共享文件实现文件共享 第一步 xff1a 将要共享的window文件夹共享 第二步 在ubuntu下进行挂载 xff0c 完整语法 xff0c 如下 xff1a 第一种方式 mount t cifs 192 1
  • ROM、SDRAM、RAM、DRAM、SRAM、FLASH 的区别

    ROM 和 RAM 指的都是半导体存储器 xff0c ROM 是 Read Only Memory 的缩写 xff0c RAM是 Random Access Memory的缩写 ROM 在系统体质供电的时候仍然可以保存数据 xff0c 而R
  • 软件开发技术文档编写规范

    在项目开发过程中 xff0c 应该按要求编写好十三种文档 xff0c 文档编制要求具有针对性 精确性 清晰性 完整性 灵活性 可追溯性 可行性分析报告 xff1a 说明该软件开发项目的实现在技术上 经济上和社会因素上的可行性 xff0c 评
  • insmod: can't insert 'led.ko': invalid module format详细解释

    insmod can 39 t insert 39 led ko 39 invalid module format 之前在Imx257学习版固件编写的驱动想直接移植imx257核心板的开发板上 以为2个板子的源码的引脚定义一样就没什么问题了
  • html媒体查询,同一个网页,在不同的条件下,使用不同的样式。

    媒体查询简述 设备 xff1a 屏幕 xff1a PC 手机端打印机屏幕阅读器 尺寸 xff1a 常见尺寸 320 420之间 响应式网页 xff1a 同一个网页 xff0c 在不同的条件下 xff0c 使用不同的样式 rem 百分比 xf
  • Anaconda3的安装和详细介绍(带图文)

    Anaconda的安装和详细介绍 xff08 带图文 xff09 Anacond的介绍 Anaconda指的是一个开源的Python发行版本 xff0c 其包含了conda Python等180多个科学包及其依赖项 因为包含了大量的科学包
  • vue项目引入less文件

    如果需要在vue项目中使用 less文件 xff0c 首先需要安装less和less loader依赖包 xff0c 这个 less文件相当于以前web项目的css文件 xff0c 有三种引入方式 xff1a 方式一 xff1a 在vue界
  • 新的开始

    这是第一次写博客 xff0c 也算是一个新的开始 今天就是写一些自己学到的内容 xff1a 今天接触了冒泡排序法 xff0c 还是能够接受的 1 init function var a 61 10 30 20 40 15 5 25 var
  • 【群晖nas】raidrive 极简教程

    1 群晖套件重心下载并配置 webDav server 2 raidrive连接群晖 xff0c 本地化使用 网盘下载 链接 xff1a https pan baidu com s 1eP9zBjlPjmL2 0MlWUlS3A 提取码 x
  • ubuntu20.04安装jenkins教程步骤-官方

    Debian Jenkins Packages Jenkins Debian Packages This is the Debian package repository of Jenkins to automate installatio
  • 编译mnistCUDNN时出错:fatal error: FreeImage.h: No such file or directory

    编译mnistCUDNN时出错 xff1a fatal error FreeImage h No such file or directory 在测试CUDNN是否正常使用时候报错 测试CUDNN8 1是否正常使用 1 在https dev
  • elementUI+MybatisPlus日期查询

    elementUI 43 MybatisPlus日期查询 1 前端设置 在el date picker组件加入value format 61 34 yyyy MM dd 34 xff0c 选择日期后 xff0c 将值自动保存为yyyy MM
  • Linux(centos7.5)下安装node.js

    Linux xff08 centos7 5 xff09 下安装node js 进入node的中文站点http nodejs cn download 并选择需要安装的版本链接 使用XShell上传到Linux中 xff0c 目录 opt so
  • typora中图片左对齐

    使用typora很久了 xff0c 但是它的图片一直是居中 xff0c 我这个人有左对齐强迫症 xff0c 想要图片左对齐 typora左对齐很简单 xff0c 打开主题的css文件 在最下面添加上如下代码 xff0c 保存后重启typor
  • Typora的引用设置多种样式

    设置引用多样式 此教程在很多人的反馈下 xff0c 有修改后有问题 xff0c 可能是版本不兼容 我下载的是 Typora version 0 10 10 xff08 beta xff09 版本 xff0c 有的人也是用此版本才修改成功的
  • MySQL安装最后一步卡死了

    今天给老师安装mysql 5 5 版本时出了问题 xff0c 老师的电脑系统为Windows7 xff0c MySQL安装版本为mysql 5 5 安装到最后一步 xff08 MySQL实例配置最后一步卡死了 xff09 xff0c 安装了
  • Element不能自动换行,内容依然超出,直到遇见空格自动换行

    我一个前端技术小白 xff0c 不会前端 xff0c 没办法 xff0c 只能使用别人做好的框架 在最近项目使用Element xff0c 需求是要显示日志 xff0c 日志表格中显示一串SQL 但是 xff0c 在使用过程中 xff0c