JS文字过长隐藏，鼠标悬停显示

最新推荐文章于 2024-09-15 15:04:21 发布

mmmmmmmmzw

最新推荐文章于 2024-09-15 15:04:21 发布

阅读量4.5k

点赞数 6

分类专栏：随笔文章标签： js vue

本文链接：https://blog.csdn.net/mmmmmmmmzw/article/details/119117012

版权

随笔专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文介绍了一种使用原生JS和Vue实现文本超出长度时用省略号替代，并通过鼠标悬停显示完整文本的方法。原生JS部分通过CSS属性设置实现了文本的截断显示；Vue部分则利用了show-overflow-tooltip特性。

摘要由CSDN通过智能技术生成

原生JS的处理办法

此部分转载自链接: js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示.

以下展示最简单的办法，转载的原文还另举了一种onload方法挂载事件。

<div style='width:120px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;' title='鼠标悬浮显示的内容'>鼠标悬浮显示的内容</div>

效果展示
注意：设置宽度，overflow:hidden, white-space:nowrap, text-overflow:ellipsis四个属性缺一不可。这种写法在所有的浏览器中都能正常显示。
white-space:nowrap; 规定段落中的文本不换行
text-overflow:ellipsis; 文本溢出部分用省略号代替
overflow:hidden; 溢出元素不显示