el-select多选以tag展示时,超过显示长度以...省略号显示,且在一行展示

news2024/11/25 11:42:33

效果:

代码:

<span>系统词典维度:</span>
	<el-select
	  v-model="dNum"
	  placeholder="请选择"
	  multiple
	  collapse-tags //设置collapse-tags属性将它们合并为一段文字
	  size="small"
	  style="width:160px"
	  class="tags-select-input"
	>
	  <el-option
	    v-for="item in gainianOptions"
	    :key="item.uid"
	    :label="item.name"
	    :value="item.en"
	  ></el-option>
	</el-select>

css:

.tags-select-input /deep/ .el-select__tags {
  white-space: nowrap;
  overflow: hidden;
  flex-flow: nowrap;
   display:flex;
  flex-wrap:nowrap;
}
.tags-select-input /deep/ .el-select__tags-text {
  display: inline-block;
  max-width: 90px;//设置最大宽度 超出显示...
  white-space: nowrap;
  overflow: hidden;
  flex-flow: nowrap;
  vertical-align:bottom;
  text-overflow:ellipsis;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1176209.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

宏转录组分析揭示不同土壤生境中氮循环基因的表达

发表期刊&#xff1a;msystems 发表时间&#xff1a;2023 影响因子&#xff1a;6.4 DOI: 10.1128/msystems.00315-23 01、研究背景 与空白土壤相比&#xff0c;植物根系和根际细菌之间的相互作用调节了氮&#xff08;N&#xff09;的循环过程&#xff0c;并创造了富含低分…

维乐 Prevail Glide带你做破风王者,无阻前行!

对于自行车骑手来说&#xff0c;需要应对的问题有很多&#xff0c;其中最大的问题之一&#xff0c;就是「风阻」。风阻永远都是你越反抗越强&#xff0c;因此为了克服风阻的力量&#xff0c;时间久了&#xff0c;身体自然会造成一定程度的损伤。如何才能调整前行的步伐&#xf…

《006.Springboot+vue之旅游信息推荐系统》【有文档】

《006.Springbootvue之旅游信息推荐系统》【有文档】 项目简介 [1]本系统涉及到的技术主要如下&#xff1a; 推荐环境配置&#xff1a;DEA jdk1.8 Maven MySQL 前后端分离; 后台&#xff1a;SpringBootMybatis; 前台&#xff1a;vueElementUI; [2]功能模块展示&#xff1a; …

VSCode配置SonarLint/SonarLint连接SonarQube

本文介绍前端开发工具vscode安装sonarlint插件&#xff0c;配置本地代码扫描步骤 点击VSCode左侧工具栏的“扩展”&#xff0c;搜索“SonarLint”并安装插件 插件安装完成后&#xff0c;点击VSCode顶部工具栏的“查看”→“打开视图…”&#xff0c;并点击弹窗中的“SonarLint…

keil代码编辑区配色方案

第一步找到global.prop文件打开 ### 第二步复制下面的文本替换global.prop的内容&#xff0c;保存。 # properties for all file types indent.automatic1 virtual.space0 view.whitespace0 view.endofline0 code.page936 caretline.visible1 highlight.matchingbraces1 prin…

什么是 HwameiStor?

HwameiStor 是一款 Kubernetes 原生的容器附加存储 (CAS) 解决方案&#xff0c;将 HDD、SSD 和 NVMe 磁盘形成本地存储资源池进行统一管理&#xff0c; 使用 CSI 架构提供分布式的本地数据卷服务&#xff0c;为有状态的云原生应用或组件提供数据持久化能力。 具体的功能特性如下…

6款优质办公软件,个个都是效率神器,可免费使用

今天给大家分享6款优质的办公软件&#xff0c;这些软件不仅功能强大&#xff0c;还可以免费使用&#xff0c;让你高效完成工作。 Todo清单——待办事项软件 Todo清单是一款强大的跨平台待办事项和时间管理软件。它可以帮助用户记录、跟踪和完成待办事项。通过创建清单&#xff…

操作系统——逻辑结构 vs 物理结构(王道视频 p63)

1.总体概述&#xff1a; 其实&#xff0c;就是讲述了一件事情&#xff0c; 文件内的内容结构——其实完全由用户定义&#xff0c;在操作系统看来&#xff0c;就是“bit串” 文件的物理结构&#xff0c;就是说这个“bit串”整体在操作系统的控制下怎么存储在外存中

RLHF的替代算法之DPO原理解析:从Zephyr的DPO到Claude的RAILF

前言 本文的成就是一个点顺着一个点而来的&#xff0c;成文过程颇有意思 首先&#xff0c;如上文所说&#xff0c;我司正在做三大LLM项目&#xff0c;其中一个是论文审稿GPT第二版&#xff0c;在模型选型的时候&#xff0c;关注到了Mistral 7B(其背后的公司Mistral AI号称欧洲…

人工智能:一种现代的方法 第三章 经典搜索 上

文章目录 人工智能&#xff1a;一种现代的方法 第三章 经典搜索 上3.1 问题求解智能体3.2 问题实例3.2.1八数码问题3.2.2八皇后问题 3.3 搜索3.3.1搜索树3.3.2 树搜索3.3.3 图搜索3.3.4 问题求解算法的性能 第三章 经典搜索 上 总结 人工智能&#xff1a;一种现代的方法 第三章…

【kali忘记密码解决办法】

&#x1f9cb;1、kali忘记密码 &#x1f9c9;2、重启不停的按【E】&#xff08;输入法为英文状态&#xff09;键进入启动前编辑命令&#xff08;若系统没有出现这个页面&#xff0c;尝试重启以此来进入引导界面&#xff09; &#x1f379;3、进入启动前编辑命令界面后&#x…

Colab: 运行Python代码的一个平台

网站&#xff1a; https://colab.sandbox.google.com/ 该网站默认情况下已经安装了tenorflow和tensorflow_probably。 Colab是运行Python代码的一个平台&#xff0c;当你的笔记本中没有安装任何Python环境&#xff0c;而又需要安装Python时&#xff0c;可以在Colab上轻便的运…

反转链表OJ题

反转链表OJ题 文章目录 反转链表OJ题题目&#xff1a;分析及代码实现:循环思想递归思想 题目&#xff1a; 分析及代码实现: 循环思想 ①新开辟一个空链表&#xff0c;我们将原链表里的元素进行头插&#xff0c;实现反转。 struct ListNode* reverseList(struct ListNode* he…

面试题:你知道 Java 中的回调机制吗?

文章目录 调用和回调机制1.同步调用2.异步调用3.回调 回调的种类同步回调例子 异步回调 调用和回调机制 在一个应用系统中, 无论使用何种语言开发, 必然存在模块之间的调用, 调用的方式分为几种。 1.同步调用 同步调用是最基本并且最简单的一种调用方式, 类A的方法a()调用类B…

LSTM缓解梯度消失问题

为何LSTM缓解梯度消失问题 为什么LSTM会减缓梯度消失&#xff1f; - 知乎 LSTM引入长短期记忆&#xff0c;cell state和hidden state&#xff0c;解决梯度消失关键是对长期记忆cell state的保留和更新 LSTM解决梯度消失的本质是在Cell state 的更新中引入输入门和遗忘门 通过…

Java 语言环境搭建

JDK 是一种用于构建在 Java 平台上发布的应用程序、Applet 和组件的开发环境&#xff0c;即编写 Java 程序必须使用 JDK&#xff0c;它提供了编译和运行 Java 程序的环境。 在安装 JDK 之前&#xff0c;首先要到 Oracle 网站获取 JDK 安装包。JDK 安装包被集成在 Java SE 中&a…

linux 启动引导找不到内核修复

问题现象 选中内核按e 看到引导内核信息 挂载ISO映像进入救援模式&#xff0c;查看boot目录 与 引导文件内容不一致 再次重启引导系统&#xff0c;按e 修改内核引导项与boot目录一致&#xff0c; crtl - x 继续执行 登录系统 mount /dev/sdm1 /mnt 挂载vfat 引导目录 纠…

Cannot run program “D:\c\IntelliJ IDEA 2021.1.3\jbr\bin\java.exe“

如果你的idea在打开后出现了这个故障 Cannot run program "D:\c\IntelliJ IDEA 2021.1.3\jbr\bin\java.exe" (in directory "D:\c\IntelliJ IDEA 2021.1.3\bin"): CreateProcess error2, 系统找不到指定的文件。 打开IDEA的设置 file --> settings --&…

ADS安装问题

1、已有老版本&#xff0c;需要安装新版本&#xff0c;自动跳过证书安装目录设置 解决办法&#xff08;ADS2019-2023版本都适用&#xff09;&#xff1a; ADS2019安装细节以及需要避免的坑 2、安装报错 解决办法&#xff0c;删除C盘里面的隐藏文件Zero G Registry&#xff1…

倒计时丨3天后,我们直播间见!

倒计时3天&#xff0c;RestCloud 零代码集成自动化平台重磅发布 ⏰11 月 9 日 14:00&#xff0c;期待您的参与&#xff01; 点击报名&#xff1a;http://c.nxw.so/dfaJ9