基于JavaScript實(shí)現(xiàn)文字超出部分隱藏
本文給大家分享文字超出部分隱藏功能,代碼比較簡(jiǎn)單,感興趣的朋友可以參考下本段代碼。
具體代碼如下所示:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>文字超出限制字?jǐn)?shù)后隱藏</title> <style> .text { width: 800px; height: 48px; line-height: 24px; color: #333; background: #ccc; border: #eaeaea 1px solid; margin: 40px auto; } .text1{ width: 500px; height: 72px; } </style> </head> <body> <div class="text">奧斯卡金像獎(jiǎng)之前,迪卡普里奧獲得本年度英國(guó)電影和電視藝術(shù)學(xué)院(BAFTA)最佳男主角獎(jiǎng)。該獎(jiǎng)項(xiàng)被認(rèn)為是奧斯卡金像獎(jiǎng)的前奏。盡管他曾經(jīng)三次被提名參選,影迷們也一直為他鳴不平,但迪卡普里奧至今尚未獲得過奧斯卡獎(jiǎng)。</div> <div class="text text1">奧斯卡金像獎(jiǎng)之前,迪卡普里奧獲得本年度英國(guó)電影和電視藝術(shù)學(xué)院(BAFTA)最佳男主角獎(jiǎng)。該獎(jiǎng)項(xiàng)被認(rèn)為是奧斯卡金像獎(jiǎng)的前奏。盡管他曾經(jīng)三次被提名參選,影迷們也一直為他鳴不平,但迪卡普里奧至今尚未獲得過奧斯卡獎(jiǎng)。但迪卡普里奧至今尚未獲得過奧斯卡獎(jiǎng)。但迪卡普里奧至今尚未獲得過奧斯卡獎(jiǎng)。</div> <script> //根據(jù)class名稱獲取元素,此案例中之所以要用class獲取元素名稱,是為了可以控制多個(gè)元素( text,text1 )的字符串度. function getByClass(oParent, sClass) { if (oParent.getElementsByClassName) { return oParent.getElementsByClassName(sClass); } else { //IE 8 7 6 var arr = []; var reg = new RegExp('\\b' + sClass + '\\b'); var aEle = oParent.getElementsByTagName('*'); for (var i = 0; i < aEle.length; i++) { if (reg.test(aEle[i].className)) { arr.push(aEle[i]); } } return arr; } } function testAuto() { var textName = getByClass(document, 'text'); for (var i = 0; i < textName.length; i++) { var nowLeng = textName[i].innerHTML.length; if ( nowLeng > 85 ) { var nowWord = textName[i].innerHTML.substr(0, 85) + '······'; textName[i].innerHTML = nowWord; } } } testAuto(); </script> </body> </html>
以上代碼簡(jiǎn)單實(shí)現(xiàn)了文字超出部分隱藏的功能,希望大家喜歡。
- js判斷元素是否隱藏的方法
- javascript 控制 html元素 顯示/隱藏實(shí)現(xiàn)代碼
- JavaScript 關(guān)于元素獲取焦點(diǎn)(隱藏元素與div)
- JS控制HTML元素的顯示和隱藏的兩種方法
- JS加jquery簡(jiǎn)單實(shí)現(xiàn)標(biāo)簽元素的顯示或隱藏
- JS實(shí)現(xiàn)隱藏同級(jí)元素后只顯示JS文件內(nèi)容的方法
- js實(shí)現(xiàn)文字超出部分用省略號(hào)代替實(shí)例代碼
- js 文字超出長(zhǎng)度用省略號(hào)代替,鼠標(biāo)懸停并以懸浮框顯示實(shí)例
- 淺析js 文字滾動(dòng)效果
- js文字鏈接的熱點(diǎn)提示效果代碼
- JavaScript實(shí)現(xiàn)隱藏省略文字效果的方法
相關(guān)文章
layui前端框架之table表數(shù)據(jù)的刷新方法
今天小編就為大家分享一篇layui前端框架之table表數(shù)據(jù)的刷新方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08Nautil 中使用雙向數(shù)據(jù)綁定的實(shí)現(xiàn)
這篇文章主要介紹了Nautil 中使用雙向數(shù)據(jù)綁定的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10微信小程序template模板與component組件的區(qū)別和使用詳解
這篇文章主要介紹了微信小程序template模板與component組件的區(qū)別和使用詳解,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05JavaScript在瀏覽器標(biāo)題欄上顯示當(dāng)前日期和時(shí)間的方法
這篇文章主要介紹了JavaScript在瀏覽器標(biāo)題欄上顯示當(dāng)前日期和時(shí)間的方法,實(shí)例分析了javascript操作時(shí)間及DOM節(jié)點(diǎn)實(shí)現(xiàn)定時(shí)觸發(fā)的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03JavaScript 實(shí)現(xiàn) Tab 點(diǎn)擊切換實(shí)例代碼
Tab 選項(xiàng)卡切換效果在現(xiàn)如今的網(wǎng)頁中,運(yùn)用的也是比較多的,包括點(diǎn)擊切換、滑動(dòng)切換、延遲切換、自動(dòng)切換等多種效果,在這篇博文里,我們是通過原生 JavaScript 來實(shí)現(xiàn) Tab 點(diǎn)擊切換的效果。2017-03-03JavaScript實(shí)現(xiàn)Tab選項(xiàng)卡切換
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)Tab選項(xiàng)卡切換效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-02-02