js 文字超出長度用省略號代替,鼠標(biāo)懸停并以懸浮框顯示實(shí)例

更新時間：2016年12月06日 17:02:30 作者：javaee_sunny

本篇文章主要介紹了js 文字超出長度用省略號代替,鼠標(biāo)懸停并以懸浮框顯示，具有一定的參考價值，有興趣的同學(xué)可以了解一下。

題目中問題一拆為二:

1.文字在超出長度時,如何實(shí)現(xiàn)用省略號代替?

2.超長長度的文字在省略顯示后,如何在鼠標(biāo)懸停時,以懸浮框的形式顯示出全部信息?

文字在超出長度時,如何實(shí)現(xiàn)用省略號代替?

用CSS實(shí)現(xiàn)超長字段用省略號表示的方法:所有瀏覽器兼容！

html代碼如下：

<div style="width:150px;overflow:hidden; white-space:nowrap; text-overflow:ellipsis">
用CSS實(shí)現(xiàn)超長字段被省略的簡單方法
</div>

注意：設(shè)置寬度，overflow:hidden, white-space:nowrap, text-overflow:ellipsis四個屬性缺一不可。這種寫法在所有的瀏覽器中都能正常顯示。

超長長度的文字在省略顯示后,如何在鼠標(biāo)懸停時,以懸浮框的形式顯示出全部信息?(此處只討論以懸浮框顯示的方式)

第一種方式:使用div中的title屬性:

先來個簡單的,一目了然的示例:

<div style='width:120px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;' title='鼠標(biāo)懸浮顯示的內(nèi)容'>鼠標(biāo)懸浮顯示的內(nèi)容</div> 
<!--這個內(nèi)容因?yàn)槭窃赿iv里面，是控制div的寬度來顯示你需要看到幾個字的長度，超出會顯示 ...-->
<!--title:提示信息，鼠標(biāo)放到該元素上顯示的提示信息-->

顯示效果,如下圖:

第二種方式:在div中綁定鼠標(biāo)經(jīng)過事件

單獨(dú)的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 文字超出長度用省略號代替,鼠標(biāo)懸停并以懸浮框顯示
      js 文字超出長度用省略號代替,鼠標(biāo)懸停并以懸浮框顯示
      js 文字超出長度用省略號代替,鼠標(biāo)懸停并以懸浮框顯示
      js 文字超出長度用省略號代替,鼠標(biāo)懸停并以懸浮框顯示
 </div>
 </body>
</html>

多個div(包含class屬性)通過懸浮框顯示:

由于div標(biāo)簽之間的距離較近,在鼠標(biāo)懸浮時,懸浮框會出現(xiàn)快速閃顯的情況,可以通過調(diào)大div的之間的間距,來改善,或者直接改為p標(biāo)簽也可以.

<!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 文字超出長度用省略號代替,鼠標(biāo)懸停并以懸浮框顯示
      js0 文字超出長度用省略號代替,鼠標(biāo)懸停并以懸浮框顯示
      js0 文字超出長度用省略號代替,鼠標(biāo)懸停并以懸浮框顯示
      js0 文字超出長度用省略號代替,鼠標(biāo)懸停并以懸浮框顯示
  </div>
    <div class='content' onmouseover="overShow(this,event)" onmouseout="outHide()">
      js1 文字超出長度用省略號代替,鼠標(biāo)懸停并以懸浮框顯示
      js1 文字超出長度用省略號代替,鼠標(biāo)懸停并以懸浮框顯示
      js1 文字超出長度用省略號代替,鼠標(biāo)懸停并以懸浮框顯示
      js1 文字超出長度用省略號代替,鼠標(biāo)懸停并以懸浮框顯示
  </div>
    <div class='content' onmouseover="overShow(this,event)" onmouseout="outHide()">
      js2 文字超出長度用省略號代替,鼠標(biāo)懸停并以懸浮框顯示
      js2 文字超出長度用省略號代替,鼠標(biāo)懸停并以懸浮框顯示
      js2 文字超出長度用省略號代替,鼠標(biāo)懸停并以懸浮框顯示
      js2 文字超出長度用省略號代替,鼠標(biāo)懸停并以懸浮框顯示
  </div>
    <div class='content' onmouseover="overShow(this,event)" onmouseout="outHide()">
      js3 文字超出長度用省略號代替,鼠標(biāo)懸停并以懸浮框顯示
      js3 文字超出長度用省略號代替,鼠標(biāo)懸停并以懸浮框顯示
      js3 文字超出長度用省略號代替,鼠標(biāo)懸停并以懸浮框顯示
      js3 文字超出長度用省略號代替,鼠標(biāo)懸停并以懸浮框顯示
  </div>
  <div id="showDiv" style="position: absolute; background-color: white; border: 1px solid black;"></div>
 </body>

</html>

顯示效果,如下圖:

補(bǔ)充:

js 文字超出長度用省略號代替,鼠標(biāo)懸浮時,直接顯示出全部信息(不以懸浮框的形式)

<!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 文字超出長度用省略號代替,鼠標(biāo)懸停并以懸浮框顯示
      js1 文字超出長度用省略號代替,鼠標(biāo)懸停并以懸浮框顯示
      js1 文字超出長度用省略號代替,鼠標(biāo)懸停并以懸浮框顯示
      js1 文字超出長度用省略號代替,鼠標(biāo)懸停并以懸浮框顯示
  </div>
    <div class='content'>
      js2 文字超出長度用省略號代替,鼠標(biāo)懸停并以懸浮框顯示
      js2 文字超出長度用省略號代替,鼠標(biāo)懸停并以懸浮框顯示
      js2 文字超出長度用省略號代替,鼠標(biāo)懸停并以懸浮框顯示
      js2 文字超出長度用省略號代替,鼠標(biāo)懸停并以懸浮框顯示
  </div>
 </body>
</html>

存在的問題:

當(dāng)鼠標(biāo)懸停時,省略的內(nèi)容在全部顯示出來之后,會擠壓下方的內(nèi)容,當(dāng)是多行顯示時,容易造成頁面錯亂.如圖: