在Element UI中,可以使用CSS的text-overflow属性来实现文本超长省略号显示,并通过tooltip组件来实现鼠标移入全部展示。

首先,在需要显示超长文本的元素上添加CSS样式:

<el-tooltip effect="dark" :content="text" placement="top">
  <div class="ellipsis">{{ text }}</div>
</el-tooltip>

然后,在样式中设置文本超长省略号显示:

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

最后,在Vue实例中设置文本内容和tooltip的显示内容:

data() {
  return {
    text: '这是一个超长文本,当文本内容超过容器宽度时,将显示省略号'
  }
}

这样,当鼠标移入元素时,tooltip组件会显示完整的文本内容。

elementUI中文本超长省略号显示鼠标移入全部展示

原文地址: https://www.cveoy.top/t/topic/iD7G 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录