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

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

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

題目中問(wèn)題一拆為二:

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

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

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

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

html代碼如下：

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

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

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

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

先來(lái)個(gè)簡(jiǎn)單的,一目了然的示例:

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

顯示效果,如下圖:

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

單獨(dú)的div(包含id屬性)通過(guò)懸浮框顯示,下面代碼在谷歌瀏覽器已測(cè)試通過(guò):

<!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 文字超出長(zhǎng)度用省略號(hào)代替,鼠標(biāo)懸停并以懸浮框顯示
      js 文字超出長(zhǎng)度用省略號(hào)代替,鼠標(biāo)懸停并以懸浮框顯示
      js 文字超出長(zhǎng)度用省略號(hào)代替,鼠標(biāo)懸停并以懸浮框顯示
      js 文字超出長(zhǎng)度用省略號(hào)代替,鼠標(biāo)懸停并以懸浮框顯示
 </div>
 </body>
</html>

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

由于div標(biāo)簽之間的距離較近,在鼠標(biāo)懸浮時(shí),懸浮框會(huì)出現(xiàn)快速閃顯的情況,可以通過(guò)調(diào)大div的之間的間距,來(lái)改善,或者直接改為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 文字超出長(zhǎng)度用省略號(hào)代替,鼠標(biāo)懸停并以懸浮框顯示
      js0 文字超出長(zhǎng)度用省略號(hào)代替,鼠標(biāo)懸停并以懸浮框顯示
      js0 文字超出長(zhǎng)度用省略號(hào)代替,鼠標(biāo)懸停并以懸浮框顯示
      js0 文字超出長(zhǎng)度用省略號(hào)代替,鼠標(biāo)懸停并以懸浮框顯示
  </div>
    <div class='content' onmouseover="overShow(this,event)" onmouseout="outHide()">
      js1 文字超出長(zhǎng)度用省略號(hào)代替,鼠標(biāo)懸停并以懸浮框顯示
      js1 文字超出長(zhǎng)度用省略號(hào)代替,鼠標(biāo)懸停并以懸浮框顯示
      js1 文字超出長(zhǎng)度用省略號(hào)代替,鼠標(biāo)懸停并以懸浮框顯示
      js1 文字超出長(zhǎng)度用省略號(hào)代替,鼠標(biāo)懸停并以懸浮框顯示
  </div>
    <div class='content' onmouseover="overShow(this,event)" onmouseout="outHide()">
      js2 文字超出長(zhǎng)度用省略號(hào)代替,鼠標(biāo)懸停并以懸浮框顯示
      js2 文字超出長(zhǎng)度用省略號(hào)代替,鼠標(biāo)懸停并以懸浮框顯示
      js2 文字超出長(zhǎng)度用省略號(hào)代替,鼠標(biāo)懸停并以懸浮框顯示
      js2 文字超出長(zhǎng)度用省略號(hào)代替,鼠標(biāo)懸停并以懸浮框顯示
  </div>
    <div class='content' onmouseover="overShow(this,event)" onmouseout="outHide()">
      js3 文字超出長(zhǎng)度用省略號(hào)代替,鼠標(biāo)懸停并以懸浮框顯示
      js3 文字超出長(zhǎng)度用省略號(hào)代替,鼠標(biāo)懸停并以懸浮框顯示
      js3 文字超出長(zhǎng)度用省略號(hào)代替,鼠標(biāo)懸停并以懸浮框顯示
      js3 文字超出長(zhǎng)度用省略號(hào)代替,鼠標(biāo)懸停并以懸浮框顯示
  </div>
  <div id="showDiv" style="position: absolute; background-color: white; border: 1px solid black;"></div>
 </body>

</html>

顯示效果,如下圖:

補(bǔ)充:

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

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

存在的問(wèn)題:

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