请问判断是否超出宽度，超出宽度以...显示，而且鼠标经过时显示全部内容可以实现吗？

qq_19414413 2015-09-02 07:03:34

判断是否超出宽度，超出宽度以...显示，而且鼠标经过时显示全部内容（全部内容以悬浮框显示，鼠标移出后不显示，不用tooltip插件）怎么实现？

...全文

107 回复打赏收藏举报

写回复

回复

切换为时间正序

请发表友善的回复…

发表回复

在 Vue 项目中，经常需要处理文本内容过长的情况。本文将介绍如何使用 Vue 和 Element UI 实现文本超出长度时显示省略号，并且鼠标移上后展示全部内容的效果。通过本文，你已经学会了如何使用 Vue 和 Element UI 实现文本超出长度显示省略号，鼠标移上悬浮展示全部内容的效果。这种效果可以提升用户体验，特别是在处理长文本内容的场景中。希望本文对你在 Vue 项目中实现文本省略号和 Tooltip 效果有所帮助。如果你有任何问题或疑问，欢迎留言讨论。

CSS段落文字只显示一行，超出部分显示省略号，鼠标悬浮显示全部段落内容 1. 给段落设置属性 .longlinedots{ max-width: 900px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } max-width: 900px; // 设置容器最大宽度 white-space: nowrap; // 设置段落文本不换行(不换行才有可能行溢出)； overflow: hidden; //

JS 文字超出部分用省略号替代鼠标悬停时显示全部内容

实现文本超长以省略号的形式隐藏文本，达到不影响其他元素布局的效果；包括多行和单行文本的省略显示，以及应用此功能时，需要注意的属性之间冲突。

总结来说，这个方法在用户将鼠标悬停在某个元素上时，延迟 0.6 秒后判断该元素内的文本是否超出其显示宽度。如果超出，就在鼠标附近显示一个包含完整文本的提示框。这是一种常见的用户界面交互方式，用于在有限的空间内展示更多的信息。//timer 鼠标放上去等待0.6秒再显示。diff = 60;

87,984

社区成员

224,681

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章