el-input 字段超长省略号
时间: 2023-10-07 16:14:25 浏览: 354
可以通过设置 `overflow: hidden` 和 `text-overflow: ellipsis` 来实现 el-input 字段超长省略号。
例如:
```html
<el-input v-model="inputValue" style="width: 200px; overflow: hidden; text-overflow: ellipsis;"></el-input>
```
其中,`width` 表示 el-input 的宽度,`overflow: hidden` 表示超出宽度的部分隐藏,`text-overflow: ellipsis` 表示超出宽度的部分显示省略号。
相关问题
el-input 字段超长省略号 鼠标移上弹出完整内容
可以通过以下方式实现:
1. 使用 CSS 的 text-overflow 属性来实现省略号:
```
.el-input {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
```
2. 在 el-input 上绑定鼠标移入事件,弹出完整内容:
```
<el-input v-model="inputValue" @mouseenter="showFullContent">{{ inputValue }}</el-input>
...
methods: {
showFullContent() {
this.$message({
message: this.inputValue,
showClose: true,
duration: 0
})
}
}
```
这里使用了 Element UI 的 Message 组件来实现弹出完整内容,当然也可以使用其他弹出框组件。
阅读全文