題目中問題一拆為二:
1.文字在超出長度時,如何實現(xiàn)用省略號代替?
2.超長長度的文字在省略顯示后,如何在鼠標懸停時,以懸浮框的形式顯示出全部信息?
文字在超出長度時,如何實現(xiàn)用省略號代替?
用CSS實現(xiàn)超長字段用省略號表示的方法:所有瀏覽器兼容！
html代碼如下：
<div style="width:150px;overflow:hidden; white-space:nowrap; text-overflow:ellipsis">用CSS實現(xiàn)超長字段被省略的簡單方法</div>
注意：設置寬度，overflow:hidden, white-space:nowrap, text-overflow:ellipsis四個屬性缺一不可。這種寫法在所有的瀏覽器中都能正常顯示。
超長長度的文字在省略顯示后,如何在鼠標懸停時,以懸浮框的形式顯示出全部信息?(此處只討論以懸浮框顯示的方式)
第一種方式:使用div中的title屬性:
先來個簡單的,一目了然的示例:
<div style='width:120px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;' title='鼠標懸浮顯示的內(nèi)容'>鼠標懸浮顯示的內(nèi)容</div> <!--這個內(nèi)容因為是在div里面，是控制div的寬度來顯示你需要看到幾個字的長度，超出會顯示 ...--><!--title:提示信息，鼠標放到該元素上顯示的提示信息-->
顯示效果,如下圖:
第二種方式:在div中綁定鼠標經(jīng)過事件
單獨的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>多個div(包含class屬性)通過懸浮框顯示:
由于div標簽之間的距離較近,在鼠標懸浮時,懸浮框會出現(xiàn)快速閃顯的情況,可以通過調(diào)大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>顯示效果,如下圖:
補充:
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>存在的問題:
當鼠標懸停時,省略的內(nèi)容在全部顯示出來之后,會擠壓下方的內(nèi)容,當是多行顯示時,容易造成頁面錯亂.如圖:
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
