首页 前端知识 ant-design中的select多选时,多选完成后下拉框一行展示

ant-design中的select多选时,多选完成后下拉框一行展示

2024-02-02 09:02:15 前端知识 前端哥 583 497 我要收藏

1、多选的时候可以全部显示出来

2、选完后就收起来一行显示了 ,多余的不在显示

3、样式方法如下

.multipleAction .ant-select-selection--multiple{

  width: 200px;

}

.multipleAction .ant-select-selection--multiple .ant-select-selection__rendered {

overflow: hidden;

}

.multipleAction .ant-select-selection--multiple .ant-select-selection__rendered ul {

display: flex;

flex-wrap: nowrap;

overflow: hidden;

float: left;

}

.multipleAction .ant-select-selection--multiple .ant-select-selection__choice {

float: none;

overflow: visible;

}

.multipleAction .ant-select-selection--multiple .ant-select-search--inline {

float: none;

position: absolute;

}

.multipleAction .ant-select-selection--multiple {

max-height: 32px;

overflow: hidden;

}

 动态的class名称,设置获取焦点和失去焦点就可以实现这个功能了呦!

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1081.html
标签
评论
发布的文章

Ajax用法总结

2024-02-14 09:02:07

JQuery之jsTree树形插件

2024-02-14 09:02:01

Why React Doesn‘t Need jQuery?

2024-02-14 09:02:00

jQuery模板字符串

2024-02-14 09:02:58

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!