elementui el-select collapse-tags文字过长换行问题

最新推荐文章于 2024-04-16 08:54:26 发布
最新推荐文章于 2024-04-16 08:54:26 发布
阅读量1.8k 收藏 2
点赞数 2
分类专栏： 前端vue-elementui VUE 文章标签： vue.js javascript elementui css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dadawdawdadadw/article/details/127811121
版权

问题展示

在这里插入图片描述

目标

在这里插入图片描述

解决方案

  1. 我们通过控制台看
    在这里插入图片描述

  2. 代码
    定义一个自己的class=“my-select”

    .my-select /deep/ .el-select__tags > span > span:nth-child(1) {
  width: 60%;
}

  3. 即解决

结束

li_chunsheng_vip
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Span中显示内容过长显示省略号---SpringCloud Alibaba_若依微服务框架改造_前端基于Vue的ElementUI---工作笔记011
添柴程序猿的专栏
04-01 639
<span class="icon"> {{item.userAddress | ellipsis}} </span> 去定义一个vue中的过滤器 export default { filters: { ellipsis (value) { if (!value) return '' if (value.length > 8) { return value.slice(0,8) + '...' } ...
el-select-tree:ElementUI的el-select与el-tree结合
05-07
ElementUI的el-select与el-tree结合在一起。 在线示例 用法 安装 npm install --save el-select-tree 需要element-ui 如果您的项目不使用element-ui，则需要引入一个单独的element-ui包，如下所示： import 'el-...
el-select多选设置collapse-tags属性将它们合并为一段文字展示时，超过显示长度以...省略号显示，且在一行展示
migexiaoliang的博客
11-10 3507
el-select多选设置collapse-tags属性将它们合并为一段文字展示时，超过显示长度以...省略号显示，且在一行展示 想要的展示效果： 样式书写，不在一行时，调节一下下面的参数适合自己的便可以变为一行：
【element】el-select多选撑开原输入框高度并换行
Weiqian_的博客
04-12 4807
解决el-select多选撑开原输入框高度并换行
element中的el-select下拉框多选显示的tags文本内容过长导致显示溢出框外
最新发布
m0_52769924的博客
04-16 197
【代码】element中的el-select下拉框多选显示的tags文本内容过长导致显示溢出框外。
element ui的select选择器collapse-tags属性文本换行
给我一根筷子，我能撬动整个地球
09-27 6793
F12 可以观察到，输入框中显示的两个 Tag 对应了两个 span 标签，当 Tag[1] 的长度过长时，默认的宽度为 max-width，会出现 Tag[1] 文本溢出，Tag[2] 换行。官方给的 collapse-tags 案例是这样的，默认展示第一个选项的 label，更多选项的 label 折叠为一个 Tag。只需要加上下面这段 css 样式就可以达到文本不换行的效果。
【前端】select标签选择多个option--扩展字段长度，实现换行
冯浩月
10-16 4908
前言 &amp;amp;nbsp;&amp;amp;nbsp; 主要内容 一、 &amp;amp;nbsp;&amp;amp;nbsp;1. $(cinemas).each(function (idxtmp, cinema) { var shortName=cinema.cinemaShortName; if(shortName.length&amp;amp;lt;6){ var num=
el-select使用了多选时，选中多个会撑开原始高度，样式错乱，使用tag展示，一行显示全部内容，超过显示长度并以...显示的方法
热门推荐
qq_42780155的博客
06-03 2万+
使用el-select的多选下拉选择时，如果默认的选择会撑开input，显示所选的全部内容； 这样子很难看，样式还不整齐。 文档中有tag的形式展现，设置collapse-tags属性将它们合并为一段文字： 就不会出现上述的情况了。 但是当多选的内容多长的时候，后面还是会撑开换行，照样使样式不整齐： 看了上面的element元素发现： 这时候需要加内容一行显示，内容超出隐藏，溢出时显示省略标记…的写法了！ css基本功大显身手的时候到啦！（记不起来或者不会的小伙伴记得百度哈…） word-break
解决vue elementUI 使用el-select 时 change事件的触发问题
01-18
<el v-model=level size=mini placeholder=请选择 change=selectChange()> <el v-for=item key=item.value label=item.label value=item.value></el> </el> 我们需要的是选择之后才触发，但是这样写你会发现，页面...
Vue ElementUI el-select 图片选择效果
02-24
基于 Vue2.x，对 ElementUI el-select 做图片选择效果。项目说明可参见：https://blog.csdn.net/sinat_31213021/article/details/129195721
详解element-ui中el-select的默认选择项问题
10-16
主要介绍了详解element-ui中el-select的默认选择项问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
el-select数据过多懒加载的解决(loadmore)
10-16
主要介绍了el-select数据过多懒加载的解决(loadmore)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
下拉框里面的过长文字实现换行，不要省略号
weixin_45981863的博客
09-27 3805
下拉框里面的options有的因为文字过长，超出的部分就以…显示了，我们要是想看全文字不是很方面，我们一般的做法就是把下拉框给加长，但是当文字特别长的时候呢，我们此时就想通过换行来实现了。 通过：white-space: pre-wrap;就可以实现不显示省略号直接换行了。 ...
使用Vue+ElementUI的下拉菜单多选时，文本内容过长导致显示溢出自动换行
weixin_43768573的博客
11-21 3968
使用Vue+ElementUI的下拉菜单多选时，文本内容过长导致显示溢出自动换行
前端基础学习-el-select多选以tag展示时，超过显示长度以...省略号显示
小夭的博客
12-04 6201
这里记录一个样式问题，我们知道element-ui给我们提供了多选时的tag形式展示 但是当tag标签过长时，会出现“溢出”的情况 直接上改变之后的效果 1920分辨率 1366分辨率 下面上代码 样式 // select的tags过长显示... .el-select__tags-text { display: inline-block; max-width: 140px; @media (max-width: 1400px) { max-width: 42px; }
el-select multiple状态下，修改特定值el-tag的样式
wayyyyep的博客
05-09 1571
本来以为可以在el-select中利用类似插槽的写法来定制el-tag，在网上找了很久，发现貌似没有这种写法。这里的el-tag貌似是element-ui根据数值自动生成的。于是用原始js，通过document.getElementsByClassName来修改样式和添加结构。这里大概可以实现效果，但是会有样式覆盖延时的问题，有朋友知道如何优雅解决这个问题的话，可以滴滴我。在工作中遇到一个需求，将选中的tag中status值为0的tag设置为不同的样式，类似这样。
element多选框文字过长多选后会变形的问题
qq_40004867的博客
05-29 473
【代码】element多选框文字过长多选后会变形的问题。
el-select多选以tag展示时，超过显示长度以...省略号显示，且在一行展示
m0_67841039的博客
11-06 1283
【代码】el-select多选以tag展示时，超过显示长度以...省略号显示，且在一行展示。
el-select 改造
weixin_39418338的博客
03-07 696
el-select 改造
<el-select collapse-tags>
08-11
回答: `<el-select collapse-tags>`是element-ui的选择器组件(el-select)中的一个属性，用于控制选择标签的折叠行为。当标签过多时，使用该属性可以将多余的标签折叠显示，并在最后一个标签处显示一个折叠提示。引用中的代码示例展示了如何在element-ui的选择器组件中使用`<el-select collapse-tags>`属性。在示例中，使用`collapse-tags`属性来实现禁用状态下折叠标签的功能。同时，为了修改标签的样式，可以在样式表中使用引用中的代码进行设置。123 #### 引用[.reference_title] - *1* [elementui el-select collapse-tags文字过长换行问题](https://blog.csdn.net/dadawdawdadadw/article/details/127811121)[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^v92^chatsearchT3_1"}} ] [.reference_item] - *2* [使用el-tooltip展示el-select多选项collapse-tags collapse-tags-tooltip](https://blog.csdn.net/zhaowenxue/article/details/125006432)[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^v92^chatsearchT3_1"}} ] [.reference_item] - *3* [el-select 多选 添加collapse-tags之后换行问题](https://blog.csdn.net/weixin_53558474/article/details/126577918)[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^v92^chatsearchT3_1"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值