一、场景
表单内的输入框一般为固定宽度，当输入框内容长度超出输入框宽度时，需要显示省略号，并设置鼠标移到输入框上时悬浮展示全部内容。文章来源：https://www.toymoban.com/news/detail-661002.html
<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;
}
假如不生效 可以再前面在文章来源地址https://www.toymoban.com/news/detail-661002.html
::v-deep .el-input .el-input__inner {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
到了这里，关于vue+elementui 实现文本超出长度显示省略号，鼠标移上悬浮展示全部内容的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
