一.題目中問題一拆為二:
(1) 文字在超出長度時,如何實現用省略號代替?
(2) 超長長度的文字在省略顯示后,如何在鼠標懸停時,以懸浮框的形式顯示出全部信息?
1. 文字在超出長度時,如何實現用省略號代替?
用CSS實現超長字段用省略號表示的方法:所有瀏覽器兼容！
html代碼如下：
<div style="width:150px;overflow:hidden; white-space:nowrap; text-overflow:ellipsis">用CSS實現超長字段被省略的簡單方法</div>
注意：設置寬度，overflow:hidden, white-space:nowrap, text-overflow:ellipsis四個屬性缺一不可。這種寫法在所有的瀏覽器中都能正常顯示。
2. 超長長度的文字在省略顯示后,如何在鼠標懸停時,以懸浮框的形式顯示出全部信息?(此處只討論以懸浮框顯示的方式)
第一種方式:使用div中的title屬性:
先來個簡單的,一目了然的示例:
<div style='width:120px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;' title='鼠標懸浮顯示的內容'>鼠標懸浮顯示的內容</div>
<!--這個內容因為是在div里面，是控制div的寬度來顯示你需要看到幾個字的長度，超出會顯示 ...-->
<!--title:提示信息，鼠標放到該元素上顯示的提示信息-->
顯示效果,如下圖:
使用title屬性的顯示效果
第二種方式:在div中綁定鼠標經過事件
<1> 單獨的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(){
content.onmouseover = function(){
this.title = this.innerHTML;
}
}
</script>
</head>
<body>
<div id='content'>
js 文字超出長度用省略號代替,鼠標懸停并以懸浮框顯示
js 文字超出長度用省略號代替,鼠標懸停并以懸浮框顯示
js 文字超出長度用省略號代替,鼠標懸停并以懸浮框顯示
js 文字超出長度用省略號代替,鼠標懸停并以懸浮框顯示
</div>
</body>
</html>
<2> 多個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 = 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>
</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" style="position: absolute; background-color: white; border: 1px solid black;"></div>
</body>
</html>
顯示效果,如下圖:
綁定onmouseover事件的顯示效果
二. 補充:
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>
存在的問題:
當鼠標懸停時,省略的內容在全部顯示出來之后,會擠壓下方的內容,當是多行顯示時,容易造成頁面錯亂.如圖:
這里寫圖片描述
