elementui消息弹出框MessageBox英文内容不换行问题

最新推荐文章于 2024-01-17 16:55:49 发布
最新推荐文章于 2024-01-17 16:55:49 发布
阅读量993 收藏 1
点赞数 3
文章标签： 前端 vue elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73533910/article/details/130325154
版权

问题：当MessageBox内容为中文时，会自动换行，但当内容为英文时不会触发自动换行

如图，内容名称为英文时，名称太长会戳出提示框，不会自动换行

 内容名称为中文时会自动换行

 解决方法：强制自动换行

.el-message-box {
	& .el-message-box__message p {
	  word-break: break-all;
	}
}

内容为英文也可以自动换行

小白是大梦想家
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 解决在element中使用$notify在提示信息中换行问题
01-22
在项目开发过程中，遇到如下用户体验提升需求：需要实现错误提示时根据后台返回错误列表信息，换行展示。 实现方式如下： 通过F12元素查看，在对应的样式中加入white-space:pre-wrap，该样式的主要作用是识别字符串中的换行符”\n”，故需要在待展示的信息字符串中加入相应的换行标识符。 在$notify消息提示中，作用于el-notification： .el-notification {white-space:pre-wrap !important; } 有的童鞋可能试过样式white-space:pre，此时会出现的若提示信息内容较长时显示不齐全的问题。 即使使用自动换行样式（
C#编程开发的MessageBox消息提示框方法测试器
04-13
C#编程开发的MessageBox消息提示框方法测试器，可快速测试MessageBox消息提示框的所有不同样式，方便自己编程使用，原创，亲测好用！
element-plus提示框文字换行
最新发布
afdgdf的博客
01-17 702
element-plus提示框文字换行
elemenPlus ElMessage 字符串如何换行问题
爱吃牛肉的政
08-22 2367
ElementPlus中的ElMessage提示字符串换行问题
elementui this.$message消息提示换行
qq_39500287的博客
10-24 605
elementui this.$message消息提示换行
element message 换行
zyf13671493506的博客
07-24 1699
vue的$message（提示框换行） 之前一直在搜怎么让提示框的文字换行，网上搜到的基本都是使用 ‘ /n ’,使用无效，也试了css换行，本来想用弹窗自己编辑html内容，还好回去官网看了一下； let arr = ['测试一', '测试二', '测试三']; let str = arr.join(' <br/> '); this.$message({ dangerouslyUseHTMLString: true, mess...
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
10-19
主要介绍了用纯Node.JS弹出Windows系统消息提示框实例(MessageBox),非常具有实用价值，需要的朋友可以参考下
visual c++ vc自定义消息弹出框MessageBox上有图片,自定义文字大小和颜色,超链接
01-21
visual c++ vc自定义消息弹出框MessageBox上有图片,自定义文字大小和颜色,超链接
利用钩子函数，截获任何弹出的消息框MessageBox
01-02
利用钩子函数，截获任何弹出的消息框MessageBox 截获所有弹出的消息框
Messagebox()如何换行
05-29
方式一： Text to cc Noshow 第 1 行…………………. 第 2 行…………………. ... …………………. 第 <>行…………………. EndText MessageBox(cc,0,'关于如何换行')
element-ui message消息提示组件 ①延长提示消息在页面停留时间②提示消息换行
m0_67841039的博客
07-18 2733
element-ui message消息提示组件 ①延长提示消息在页面停留时间②提示消息换行
在element-ui中确认消息弹框this.$confirm提示信息换行
m0_59547707的博客
08-25 1270
this.$confirm提示信息换行
elementUI中的message换行
weixin_43961652的博客
12-28 2971
要求：提示文字太长了，需要换行显示 代码如下： message是后端传来的值，里面如果带了<br/>，也可以换行 this.$message({ dangerouslyUseHTMLString: true, message:'导入失败! <br/>' + message, type:'error', }) ...
ElementUI 文本内容不能自动换行，内容超出显示（遇到中文、空格才会换行）
上好佳的博客
11-10 4357
问题（如图）： 文本超出显示范围，尝试其他几种情况后发现，当文本中无空格和中文时，才会出现下图中的情况 解决方案： 设置 div 强制换行 <div style="word-break: break-all"> zxcvbnmasdfghjklpoiuytrewq|zxcvbnmasdfghjklpoiuytrewq|zxcvbnmasdfghjklpoiuytrewq </div> 其他： 举例一下几种可以正常换行的情.
Element MessageBox手动换行
weixin_43833540的博客
01-09 839
【代码】Element MessageBox手动换行。
element-ui下提示框messageBox内容换行问题
xcxy2015的博客
11-29 5366
诉求：在使用element-ui的情况下，想在前端弹出提示框，且框内的消息可以自由换行。 解决方法：在this.alert中加一个配置： dangerouslyUseHTMLString:true 然后就可以以html的方式输入提示框的内容了，可以自由的调整字号，换行，空格，颜色等。 源码： this.$alert('<h4>这是第一行</h4><br&...
解决elementui消息提示this.$message换行问题
m0_58565372的博客
08-24 6683
在element ui 的message消息提示的组件里面有个属性dangerouslyUseHTMLString（将。今天遇到一个问题，就是我的消息提示太长了，想要实现换行。就两步就能实现this.$message换行问题。就会被当作 HTML 片段处理。经过研究实现的效果为。属性设置为 true，
element-ui之MessageBox内容换行
qq_45268602的博客
05-22 1370
使用element-ui的MessageBox弹框时，弹框内容实现自定义换行. let data = ["数据项一", "数据项二", "数据项三", "数据项四", "数据项五"]; let newData = []; const h = this.$createElement; data.forEach((item) => { newData.push(h("p", null, item)); }); this.$con
messagebox英文内容不换行
08-09
在使用MessageBox时，默认情况下英文内容不会换行。MessageBox是Windows操作系统中的一个对话框窗口，用于显示简单的消息和通知。在使用MessageBox函数时，我们可以传入一个字符串作为要显示的内容。如果该字符串包含英文文本，MessageBox默认会按照字符串的长度显示文本内容，不会自动换行。 要注意的是，在MessageBox中，如果要在英文文本中手动添加换行符，可以使用"\n"或"\r\n"来实现。这样，MessageBox会在该换行符处进行换行显示。 例如，如果我们想要在MessageBox中显示"Hello\nWorld"，那么MessageBox会将其作为两行进行显示，分别是"Hello"和"World"。 另外，为了确保英文内容不换行，我们可以通过设置MessageBox的宽度来限制文本长度。当MessageBox的宽度不足以容纳整个英文文本时，MessageBox会自动将其截断显示，而不会进行换行。 总的来说，在使用MessageBox时，默认情况下英文内容不会自动换行，而是根据文本长度来显示。如果需要手动换行，可以使用换行符"\n"或"\r\n"来实现。如果不希望英文文本换行，可以通过设置MessageBox的宽度来限制文本长度。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值