el-form-item实现内容为非文字时超出自动换行

最新推荐文章于 2025-03-24 17:14:49 发布
最新推荐文章于 2025-03-24 17:14:49 发布
阅读量1.5k 收藏 2
点赞数 2
文章标签： vue.js 前端 elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43773218/article/details/129155087
版权
在el-form-item组件中，文本内容过长会自动换行，但数字或字母则不会。为了解决这个问题，可以在el-form-item上添加word-break:break-all属性，这样能确保非文字内容也能自动换行。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在el-form-item中当内容为文字时，内容过长超出的话是会自动换行的，如下图：

但当内容为数字或字母时，自动换行便失效了，如下图：

这时只需在el-form-item中加个属性word-break: break-all便可以实现内容为非文字时也能自动换行

可狗可乐
关注
实现el-form-item每行内容等分，且内容过长自动换行
树上骑个猴的博客
11-04 1万+
效果图： 我这里以三等分为例： <el-form-item label="标签说明:"> <div style="display: flex;flex-wrap:wrap"> <div class="label-style">单号：{{"17147873112131"}}</div> <div class="label-style">异常时间：.
el-form-item 的 content 换行展示
qq_42396813的博客
01-16 1300
el-form el-form-item 标题（label）和内容（content）不同行，实现换行展示
【前端】 el-form-item的label由于字数多自行换行调整
最新发布
一只菜鸟夹
03-24 549
两个el-col span均为12，中间还有很大空格，但是前面的label就是换行，不论如何调整span比例都没用如上图，标签换行了。
如何将el-form-item中表单项label和表单项内容换行
热门推荐
前端帅小伙
01-28 2万+
只需要将el-form或者el-form-item中的label-width属性去掉或者设置为0即可，这样即可满足长标签的要求，以适应问答类表单等场景。
el-form-item label换行
weixin_42610671的博客
01-10 1994
如果你想让 el-form-item 的标签换行，你可以使用 css 的 word-wrap 属性来实现。例如： .el-form-item__label {word-wrap: break-word; }
开发需求总结10-修改el-form-item的label，实现换行并且修改换行字体的样式
Mr_LiuP的博客
01-15 2560
修改el-form-item的label，实现换行并且修改换行字体的样式
el-form-item超出页面就自动换行
11-29
可以通过以下两种方法实现el-form-item超出页面就自动换行： 1. 将el-form-item中的label-position属性设置为“top”即可...如果内容为非文字时也需要自动换行，可以在el-form-item中加上属性word-break: break-all。
el-form自动换行
11-29
el-form自动换行可以通过在el-form-item中加入属性word-break: break-all来实现，代码如下所示： ```html <el-form> <el-form-item label="这是一个很长的label"> <div style="word-break: break-all;"> 这是一个...
el-form-item label换行自适应高度
11-15
在Ant Design Vue的`el-form-item`组件中，如果你需要让"label"标签换行并且自适应高度，可以利用CSS来调整样式。你可以设置`label`元素的`display`属性为`inline-block`，然后给它添加一个固定的宽度，并使用`...
Web前端之vue+element-puls的el-form-item实现label和内容换行、同时具有多个类名才起作用的条件样式写法、css类名条件判断、多条件选择器、样式选择器、initial
优快云博客主页地址：https://mengjian.blog.youkuaiyun.com/
12-02 3169
Web前端之vue+element-puls的el-form-item实现label和内容换行、同时具有多个类名才起作用的条件样式写法、css类名条件判断、多条件选择器、样式选择器、initial
强制 el-form-item lable 和 input 换行显示
m0_61603704的博客
07-27 1521
【代码】强制 el-form-item lable 和 input 换行显示。
el-form-item属性label添加换行
Gpointy的博客
10-16 1324
0 效果 1 el-form-item 2 style
el-form-item中表单项label和表单项内容换行显示
weixin_69651047的博客
05-21 2975
1. 将el-form中的label-width属性去掉。2. 给表单项设置style="width:100%"
el-form中el-form-item label换行
javahellohahaha的博客
09-13 4038
label添加换行符 \n
el-dialog中的el-form-item 文字超过长度，设置隐藏，最后面用三个点表示
Aa12364567的博客
11-21 3293
el-dialog中的el-form-item 文字超过长度，设置隐藏，最后面用三个点表示。
el-form-item标签的label的文字如何实现换行
weixin_51272231的博客
01-18 2157
【代码】 el-form-item标签的label的文字如何实现换行。
el-form-item内容过多，及弹窗框宽度属性show-overflow-tooltip设置
weixin_30832143的博客
07-01 4819
内容过多： :show-overflow-tooltip=true 宽度属性设置： .el-tooltip__popper{ max-width:30% } 转载于:https://www.cnblogs.com/panax/p/11116429.html
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值