600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > vue+elementui 实现文本超出长度显示省略号 鼠标移上悬浮展示全部内容

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

时间:2023-11-28 03:32:28

相关推荐

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

一、场景

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

二、实现方法

1、定义悬浮框

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

2、设置css样式

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。