当前位置: 首页 > news >正文

vue+elementui 实现文本超出长度显示省略号,鼠标移上悬浮展示全部内容

一、场景

表单内的输入框一般为固定宽度,当输入框内容长度超出输入框宽度时,需要显示省略号,并设置鼠标移到输入框上时悬浮展示全部内容。

 <el-tooltipplacement="top-start"effect="light":content="basicData['Organization']":disabled="basicData['Organization'].length <= 11"><!-- 当输入框内容长度小于11时,顶部提示框不显示 --><el-inputv-model="basicData['Organization']"disabled="disabled"></el-input></el-tooltip>

设置css样式

//设置输入框超出长度隐藏并显示省略号
.el-input.is-disabled .el-input__inner {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}

假如不生效 可以再前面在

::v-deep .el-input .el-input__inner {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}
http://www.lryc.cn/news/132268.html

相关文章:

  • 【STM32RT-Thread零基础入门】 5. 线程创建应用(线程创建、删除、初始化、脱离、启动、睡眠)
  • 计算机竞赛 python+深度学习+opencv实现植物识别算法系统
  • 深度探索ChatGPT:如何进行专业提问以获取精确答案
  • 1.vue3+vite开发中axios使用及跨域问题解决
  • 【LangChain】P1 LangChain 应用程序的核心构建模块 LLMChain 以及其三大部分
  • 关于查看处理端口号和进程[linux]
  • C 语言的 strcat() 函数和 strncat() 函数
  • C++ string 的用法
  • MyBatis-Flex学习记录1---请各位大神指教
  • 二分查找旋转数组
  • 关于3D位姿旋转
  • 解锁项目成功的关键:项目经理的结构化思维之道
  • 力扣974被K整除的子数组
  • 简单认识Docker数据管理
  • UDP数据报结构分析(面试重点)
  • 【Java 动态数据统计图】动态数据统计思路案例(动态,排序,数组)二(113)
  • C++进阶 类型转换
  • Idea中隐藏指定文件或指定类型文件
  • 第2步---MySQL卸载和图形化工具展示
  • 原型和原型链
  • 解决ios隔空播放音频到macos没有声音的问题
  • LTPP在线开发平台【使用教程】
  • 0818 新增码表 git拉取代码
  • AI 绘画Stable Diffusion 研究(十)sd图生图功能详解-精美二维码的制作
  • C# File.ReadAllLines()报错
  • LeetCode 1162. As Far from Land as Possible【多源BFS】中等
  • 【算法】二分查找(整数二分和浮点数二分)
  • git压缩/合并多次commit提交为1次commit提交
  • 【3519DV500】AI算法承载硬件平台_2.5T算力+AI ISP图像处理_超感光视频硬件方案开发
  • Linux系统基础服务启动的方法