js⽂字超出长度⽤省略号代替,⿏标悬停并以悬浮框显⽰实
例
题⽬中问题⼀拆为⼆:
1.⽂字在超出长度时，如何实现⽤省略号代替?
2.超长长度的⽂字在省略显⽰后，如何在⿏标悬停时，以悬浮框的形式显⽰出全部信息?
⽂字在超出长度时，如何实现⽤省略号代替?
字符串长度超出⽤CSS实现超长字段⽤省略号表⽰的⽅法：所有浏览器兼容！
html代码如下：
<div >
⽤CSS实现超长字段被省略的简单⽅法
</div>
注意：设置宽度，overflow:hidden, white-space:nowrap, text-overflow:ellipsis四个属性缺⼀不可。这种写法在所有的浏览器中都能正常显⽰。
超长长度的⽂字在省略显⽰后，如何在⿏标悬停时，以悬浮框的形式显⽰出全部信息?(此处只讨论以悬浮框显⽰的⽅式)
第⼀种⽅式：使⽤div中的title属性:
先来个简单的,⼀⽬了然的⽰例:
<div style='width:120px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;' title='⿏标悬浮显⽰的内容'>⿏标悬浮显⽰的内容</div>
<!--这个内容因为是在div⾥⾯，是控制div的宽度来显⽰你需要看到⼏个字的长度，超出会显⽰ ...-->
<!--title：提⽰信息，⿏标放到该元素上显⽰的提⽰信息-->
显⽰效果，如下图:
第⼆种⽅式：在div中绑定⿏标经过事件
单独的div(包含id属性)通过悬浮框显⽰，下⾯代码在⾕歌浏览器已测试通过:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>
RunJS 演⽰代码
</title>
<style>
#content{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width:200px;
}
</style>
<script>
onload = function(){
this.title = this.innerHTML;
}
}
</script>
</head>
<body>
<div id='content'>
js ⽂字超出长度⽤省略号代替,⿏标悬停并以悬浮框显⽰
js ⽂字超出长度⽤省略号代替,⿏标悬停并以悬浮框显⽰
js ⽂字超出长度⽤省略号代替,⿏标悬停并以悬浮框显⽰
js ⽂字超出长度⽤省略号代替,⿏标悬停并以悬浮框显⽰
</div>
</body>
</html>
多个div(包含class属性)通过悬浮框显⽰:
由于div标签之间的距离较近，在⿏标悬浮时，悬浮框会出现快速闪显的情况，可以通过调⼤div的之间的间距，来改善，或者直接改为p标签也可以.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>
演⽰代码
</title>
<style>
.content{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width:200px;
}
</style>
<script>
function overShow(obj,e) {
var showDiv = ElementById('showDiv');
var theEvent = window.event|| e;
showDiv.style.left = theEvent.clientX+"px";
p = theEvent.clientY+"px";
showDiv.style.display = 'block';
//alert(obj.innerHTML);
showDiv.innerHTML = obj.innerHTML;
}
function outHide() {
var showDiv = ElementById('showDiv');
showDiv.style.display = 'none';
showDiv.innerHTML = '';
}
</script>
</head>
<body>
<div class='content' onmouseover="overShow(this,event)" onmouseout="outHide()">
js0 ⽂字超出长度⽤省略号代替,⿏标悬停并以悬浮框显⽰
js0 ⽂字超出长度⽤省略号代替,⿏标悬停并以悬浮框显⽰
js0 ⽂字超出长度⽤省略号代替,⿏标悬停并以悬浮框显⽰
js0 ⽂字超出长度⽤省略号代替,⿏标悬停并以悬浮框显⽰
</div>
<div class='content' onmouseover="overShow(this,event)" onmouseout="outHide()">
js1 ⽂字超出长度⽤省略号代替,⿏标悬停并以悬浮框显⽰
js1 ⽂字超出长度⽤省略号代替,⿏标悬停并以悬浮框显⽰
js1 ⽂字超出长度⽤省略号代替,⿏标悬停并以悬浮框显⽰
js1 ⽂字超出长度⽤省略号代替,⿏标悬停并以悬浮框显⽰
</div>
<div class='content' onmouseover="overShow(this,event)" onmouseout="outHide()">
js2 ⽂字超出长度⽤省略号代替,⿏标悬停并以悬浮框显⽰
js2 ⽂字超出长度⽤省略号代替,⿏标悬停并以悬浮框显⽰
js2 ⽂字超出长度⽤省略号代替,⿏标悬停并以悬浮框显⽰
js2 ⽂字超出长度⽤省略号代替,⿏标悬停并以悬浮框显⽰
</div>
<div class='content' onmouseover="overShow(this,event)" onmouseout="outHide()">
js3 ⽂字超出长度⽤省略号代替,⿏标悬停并以悬浮框显⽰
js3 ⽂字超出长度⽤省略号代替,⿏标悬停并以悬浮框显⽰
js3 ⽂字超出长度⽤省略号代替,⿏标悬停并以悬浮框显⽰
js3 ⽂字超出长度⽤省略号代替,⿏标悬停并以悬浮框显⽰
</div>
<div id="showDiv" ></div>
</body>
</html>
显⽰效果，如下图:
补充:
js ⽂字超出长度⽤省略号代替,⿏标悬浮时，直接显⽰出全部信息(不以悬浮框的形式)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>
RunJS 演⽰代码
</title>
<!-- 如果是id属性，将.改为#即可 -->
<style>
.content{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width:200px;
}
.content:hover {height: auto;white-space: normal;}
</style>
</head>
<body>
<div class='content'>
js1 ⽂字超出长度⽤省略号代替,⿏标悬停并以悬浮框显⽰
js1 ⽂字超出长度⽤省略号代替,⿏标悬停并以悬浮框显⽰
js1 ⽂字超出长度⽤省略号代替,⿏标悬停并以悬浮框显⽰
js1 ⽂字超出长度⽤省略号代替,⿏标悬停并以悬浮框显⽰
</div>
<div class='content'>
js2 ⽂字超出长度⽤省略号代替,⿏标悬停并以悬浮框显⽰
js2 ⽂字超出长度⽤省略号代替,⿏标悬停并以悬浮框显⽰
js2 ⽂字超出长度⽤省略号代替,⿏标悬停并以悬浮框显⽰
js2 ⽂字超出长度⽤省略号代替,⿏标悬停并以悬浮框显⽰
</div>
</body>
</html>
存在的问题:
当⿏标悬停时，省略的内容在全部显⽰出来之后，会挤压下⽅的内容，当是多⾏显⽰时，容易造成页⾯错乱.如图：以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论