频道导航

js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例

2019-01-06 JavaScript 前端之家

前端之家收集整理的这篇文章主要介绍了js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

题目中问题一拆为二:

1.文字在超出长度时,如何实现用省略号代替?

2.超长长度的文字在省略显示后,如何在鼠标悬停时,以悬浮框的形式显示出全部信息?

文字在超出长度时,如何实现用省略号代替?

用CSS实现超长字段用省略号表示的方法:所有浏览器兼容！

HTML代码如下：

方法

注意：

设置宽度，overflow:hidden,white-space:nowrap,text-overflow:ellipsis四个属性缺一不可。这种写法在所有的浏览器中都能正常显示。

超长长度的文字在省略显示后,以悬浮框的形式显示出全部信息?(此处只讨论以悬浮框显示的方式)

第一种方式:使用div中的title属性:

先来个简单的,一目了然的示例:

鼠标悬浮显示的内容

显示效果,如下图:

第二种方式:在div中绑定鼠标经过事件

单独的div(包含id属性)通过悬浮框显示,下面代码在谷歌浏览器已测试通过:

<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> RunJS 演示<a href="/tag/daima/" target="_blank" class="keywords">代码</a> @H_403_49@ onload = function(){ content.onmouSEOver = function(){ this.title = this.innerHTML; } }

js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示 js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示

多个div(包含class属性)通过悬浮框显示:

由于div标签之间的距离较近,在鼠标悬浮时,悬浮框会出现快速闪显的情况,可以通过调大div的之间的间距,来改善,或者直接改为p标签也可以.

<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 演示<a href="/tag/daima/" target="_blank" class="keywords">代码</a> @H_403_49@ function overShow(obj,e) { var showDiv = document.getElementById('showDiv'); var theEvent = window.event|| e; showDiv.style.left = theEvent.clientX+"px"; showDiv.style.top = theEvent.clientY+"px"; showDiv.style.display = 'block'; //alert(obj.innerHTML); showDiv.innerHTML = obj.innerHTML; }

 function outHide() {
 var showDiv = document.getElementById('showDiv');
 showDiv.style.display = 'none';
 showDiv.innerHTML = '';
 }
</script>

SEOver="overShow(this,event)" onmouSEOut="outHide()"> js0 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示 js0 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示

SEOver="overShow(this,event)" onmouSEOut="outHide()"> js1 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示 js1 文字超出长度用省略号代替,event)" onmouSEOut="outHide()"> js2 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示 js2 文字超出长度用省略号代替,event)" onmouSEOut="outHide()"> js3 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示 js3 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示

显示效果,如下图: