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é)可以了解一下。
題目中問題一拆為二:
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è)屬性缺一不可。這種寫法在所有的瀏覽器中都能正常顯示。
超長(zhǎng)長(zhǎng)度的文字在省略顯示后,如何在鼠標(biāo)懸停時(shí),以懸浮框的形式顯示出全部信息?(此處只討論以懸浮框顯示的方式)
第一種方式:使用div中的title屬性:
先來個(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的寬度來顯示你需要看到幾個(gè)字的長(zhǎng)度，超出會(huì)顯示 ...--> <!--title:提示信息，鼠標(biāo)放到該元素上顯示的提示信息-->
顯示效果,如下圖:
第二種方式:在div中綁定鼠標(biāo)經(jīng)過事件
單獨(dú)的div(包含id屬性)通過懸浮框顯示,下面代碼在谷歌瀏覽器已測(cè)試通過:
<!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屬性)通過懸浮框顯示:
由于div標(biāo)簽之間的距離較近,在鼠標(biāo)懸浮時(shí),懸浮框會(huì)出現(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 文字超出長(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>
存在的問題:
當(dāng)鼠標(biāo)懸停時(shí),省略的內(nèi)容在全部顯示出來之后,會(huì)擠壓下方的內(nèi)容,當(dāng)是多行顯示時(shí),容易造成頁面錯(cuò)亂.如圖:
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
axios實(shí)現(xiàn)簡(jiǎn)單文件上傳功能
這篇文章主要為大家詳細(xì)介紹了axios實(shí)現(xiàn)簡(jiǎn)單文件上傳功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要介紹了JavaScript中?Promise?的使用技巧，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-08-08
今天小編就為大家分享一篇layui獲取多選框中的值方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
上一篇文章，我們講解了圖像金字塔，這篇文章我們來了解仿射變換,仿射？任何仿射變換都可以轉(zhuǎn)換成，乘以一個(gè)矩陣（線性變化），再加上一個(gè)向量(平移變化),接下來詳細(xì)介紹，感興趣的朋友可以了解下2013-01-01
這篇文章主要介紹了如何在JavaScript中謹(jǐn)慎使用代碼注釋，必要的注釋可以闡明實(shí)現(xiàn)細(xì)節(jié)和設(shè)計(jì)意圖，以此節(jié)約自己和別人的時(shí)間。 然而很多時(shí)候注釋起的作用卻適得其反，,需要的朋友可以參考下2019-06-06
Intellij中直接運(yùn)行ts配置方法:run?configuration?for?typescript
run?configuration?for?typescript?插件本質(zhì)還是依賴于ts-node來運(yùn)行,只是其可以幫助我們自動(dòng)配置好ts-node運(yùn)行參數(shù),簡(jiǎn)化使用,這篇文章給大家介紹在Intellij中可以借助插件run?configuration?for?typescript直接運(yùn)行typescript的方法,感興趣的朋友一起看看吧2023-08-08
文字不間斷滾動(dòng)(上下左右)實(shí)例代碼，需要的朋友可以參考一下2013-04-04
這篇文章主要介紹了js生成縮略圖后上傳，利用canvas重繪,需要的朋友可以參考下2014-05-05
JavaScript控制網(wǎng)頁平滑滾動(dòng)到指定元素位置的方法
這篇文章主要介紹了JavaScript控制網(wǎng)頁平滑滾動(dòng)到指定元素位置的方法,實(shí)例分析了javascript操作頁面滾動(dòng)的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
filemanage功能中用到的common.js...2007-04-04