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

原创于 2023-08-17 19:47:50 发布 · 4.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #前端

本文介绍了在Vue应用中，如何使用ElementUI的El-tooltip实现输入框内容超出时的省略号处理，并通过CSS样式控制文本溢出效果。着重讲解了如何确保在不同情况下的正确显示和隐藏提示。

一、场景

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

 <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样式

//设置输入框超出长度隐藏并显示省略号
.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;
}