解决ElementUI的Notification通知不自动换行

最新推荐文章于 2024-05-13 14:46:09 发布
原创 最新推荐文章于 2024-05-13 14:46:09 发布 · 1.5k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #ElementUI #js

本文指导如何通过自定义样式解决ElementUI Notification中的提示文本溢出问题，关键在于应用`word-break: break-all`属性实现自动换行。

解决ElementUI的Notification通知不自动换行的问题

问题描述：

提示语没有自动换行，超出了弹框的范围，影响客户使用
在这里插入图片描述

解决办法：

自定义一个样式customNotifyClass，去掉scoped
在这里插入图片描述
在这里插入图片描述
样式里最主要的是word-break: break-all，break-all会使提示语在合适的位置自动换行，允许在单词内换行，而不写这个样式默认是normal会使用浏览器默认的换行规则。
在这里插入图片描述

实现效果：

在这里插入图片描述

vue + Element UI的Notification通知
m0_45192514的博客
03-26 1477
vue + Element UI的Notification通知 比较简单 效果图 源码 var msg = new Vue({ el: “#Message”, data: { list: [ { msg: “请输入用户名”, title: “错误”, type: “error”, duration:0 }, { msg: “登录成功”, title: “成功”, type: “success”, duration: 3000 }, { msg: “账号安全警告”, title: “警告”, type: “
element Notify通知 提示文字自动换行
蓝胖子的博客
04-27 1322
element Notify通知 提示文字自动换行
vue-element-admin $notify 内容过长不自动换行的问题
09-16 1035
解决方案:样式覆盖自动换行 /*设置内容超出后自动换行*/ word-wrap: break-word; word-break: break-all;
element-ui Notification 通知文字换行
qq_45489665的博客
04-01 2346
换行代码如下： let success='', fail=''; for(let o in res.data.ToSuccess) { success += res.data.ToSuccess[o] + " " } for(let p in res.data.ToFailure) {
ElementUI 文本内容不能自动换行，内容超出显示（遇到中文、空格才会换行）
上好佳的博客
11-10 4882
问题（如图）： 文本超出显示范围，尝试其他几种情况后发现，当文本中无空格和中文时，才会出现下图中的情况 解决方案： 设置 div 强制换行 <div style="word-break: break-all"> zxcvbnmasdfghjklpoiuytrewq|zxcvbnmasdfghjklpoiuytrewq|zxcvbnmasdfghjklpoiuytrewq </div> 其他： 举例一下几种可以正常换行的情.
element-plus的ElNotification 内容换行显示
leng0920的博客
05-13 862
element-plus的ElNotification 内容换行显示
element-ui Message消息提示文字换行
小二来一只葫芦
05-30 8718
let data = ['导入成功条数：' + response.data.successNum + '条；', '导入失败条数：' + response.data.failNum + '条；', '导入失败原因：'+response.data.failMsg]; let newDatas = []; const h = this.$createE...
精选资源
在elementui中Notification组件添加点击事件实例
01-22
1. 官方文档 ... handleClick() { let telNo = 1111, ... title: 通知消息, position: bottom-right, dangerouslyUseHTMLString: true, message: `号码：${telNo}</i></p>`, duration: 0, type: warning, onClic
Element Notification通知的实现示例
10-15
在本文中，我们将深入探讨如何在Vue项目中使用Element UI库实现Notification通知功能。Element UI 是一个基于 Vue.js 的组件库，提供了丰富的UI组件，用于构建美观且易于使用的Web应用界面。Notification组件是其中...
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
10-16
在Vue项目中，Element-UI库提供了一个名为`Notification`的组件，用于创建全局的通知提示。这个组件在默认情况下提供了一些基本的配置选项，但有时我们可能需要更自定义的功能，比如添加自定义按钮或者控制多个通知...
把elementui 里的message 消息提示内容换行显示+弹框一直显示不消失+修改弹框位置+可以手动关闭消息提示框（把js字符串按照分号换行）
南北极之间
10-12 3774
原始得到的结果太多了！想换行 解决方法： 代码： if (response.code == 500) { console.log(response.code) // this.$message.error(response.msg) let str = response.msg let reg = /[;；]/g; str=str.replace(reg,' <br/> '); con
elementui表格不换行_快速整理表格数据实用技能及技巧
weixin_42311672的博客
12-11 783
1.1清除数据中的垃圾1、清除数据中的空格一般情况下，数据前后和中间的空格用“查找和替换”工具即可解决。也可以打开“查找和替换”对话框，在“查找内容”文本框中输入一个空格，在“替换为”文本框中留空（什么也不输）单击“全部替换”按钮即可。如图如果是英文名称，那么按照英语语法要求，英语单词之间必须有个空格。此时，就不能使用“查找和替换”工具了，因为这样会替换掉所有的空格。这种情况下，可以使用TRIM函...
elementUI的notify组件的使用，点击事件和内容自动换行
生而为人我很抱歉
11-03 812
【代码】elementUI的notify组件的使用，点击事件和内容自动换行。
ElementUI弹框组件 messageBox 如何换行 ？
草巾冒小子的博客
09-19 8707
ElementUI弹框组件 messageBox 如何换行 ？ 参考博客：element this.$confirm确定框内容换行显示 效果图 · 截图示下： demo代码如下： const confirmText = ['您确定要结束招聘吗？','注意：一经确定，该职位招聘信息将会下架且不支持修改，剩余人才币将直接返还到您的账户。']; const newDatas = []; c...
element-ui之MessageBox内容换行
qq_45268602的博客
05-22 1585
使用element-ui的MessageBox弹框时，弹框内容实现自定义换行. let data = ["数据项一", "数据项二", "数据项三", "数据项四", "数据项五"]; let newData = []; const h = this.$createElement; data.forEach((item) => { newData.push(h("p", null, item)); }); this.$con
element-ui下提示框messageBox内容换行问题
xcxy2015的博客
11-29 5993
诉求：在使用element-ui的情况下，想在前端弹出提示框，且框内的消息可以自由换行。 解决方法：在this.alert中加一个配置： dangerouslyUseHTMLString:true 然后就可以以html的方式输入提示框的内容了，可以自由的调整字号，换行，空格，颜色等。 源码： this.$alert('<h4>这是第一行</h4><br&...
antdv中Notification组件换行的两种方式
returndbf的博客
11-17 1535
使用VNode进行换行的两种方式
vue + element ui之$notify使用自定义组件
qq_44938769的博客
12-05 5265
this.$notify使用自定义组件的方式进行使用
elementUI 通知组件 notification不自动关闭如果通知多了怎么解决
最新发布
07-10
ElementUI 的 `Notification` 组件提供了一种灵活的方式来展示全局的通知消息。...通过以上方法，可以根据具体需求对 `Notification` 进行配置和优化，从而有效解决通知不自动关闭导致的通知堆积问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大雄不是大熊

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值