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

一、场景

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

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

设置css样式

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

假如不生效 可以再前面在

javascript 复制代码
::v-deep .el-input .el-input__inner {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
相关推荐
天天向上102415 分钟前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y31 分钟前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁38 分钟前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry38 分钟前
Fetch 笔记
前端·javascript
拾光拾趣录39 分钟前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟40 分钟前
vue3,你看setup设计详解,也是个人才
前端
Lefan44 分钟前
一文了解什么是Dart
前端·flutter·dart
Patrick_Wilson1 小时前
青苔漫染待客迟
前端·设计模式·架构
写不出来就跑路1 小时前
基于 Vue 3 的智能聊天界面实现:从 UI 到流式响应全解析
前端·vue.js·ui
OpenTiny社区1 小时前
盘点字体性能优化方案
前端·javascript