使用Vue+ElementUI的下拉菜单多选时,文本内容过长导致显示溢出自动换行

本文介绍了解决下拉菜单在父元素设置了flex-wrap:wrap后因文本框宽度不足而导致内容自动换行的问题。提供了两种解决方案:一是通过设置父元素的flex-wrap属性为nowrap;二是限制下拉菜单中所选内容的最大宽度。

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

在这里插入图片描述
产生该现象的原因如下:
1、由于父元素设置了flex-wrap: wrap;当下拉菜单文本框宽度不够,导致里面所选的内容自动换行

解决办法:
1、父元素设置flex-wrap: nowrap;
2、将里面所选内容的宽度变小,如max-width: 90px;

<style scoped lang="scss">
/deep/ .el-select__tags-text {
  max-width: 90px;
}
/deep/ .el-select__tags {
  flex-wrap: nowrap;
}
</style>

在这里插入图片描述

回答: 在Vue中实现下拉框换行显示的方法有种。其中一种方法是通过设置父元素的flex-wrap属性为nowrap,然后将所内容的宽度变小,例如设置max-width为90px。具体代码如下所示: ```html <style scoped lang="scss"> /deep/ .el-select__tags-text { max-width: 90px; } /deep/ .el-select__tags { flex-wrap: nowrap; } </style> ``` 这样设置之后,下拉框中的内容就会自动换行显示了。\[2\]另外,你也可以根据具体的需求进行调整,例如修改max-width的值来控制换行的宽度。希望这个解决办法对你有帮助。 #### 引用[.reference_title] - *1* [vue鼠标停留下拉框显示悬浮信息,CSS两列行](https://blog.csdn.net/qq_40960038/article/details/113782768)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [使用Vue+ElementUI下拉菜单文本内容过长导致显示溢出自动换行](https://blog.csdn.net/weixin_43768573/article/details/127959437)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [一种实现 Vue Element 自带搜索栏后不换行的方法](https://blog.csdn.net/li_dian_jin/article/details/122054779)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值