<!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">奧斯卡金像獎之前，迪卡普里奧獲得本年度英國電影和電視藝術(shù)學(xué)院（BAFTA）最佳男主角獎。該獎項(xiàng)被認(rèn)為是奧斯卡金像獎的前奏。盡管他曾經(jīng)三次被提名參選，影迷們也一直為他鳴不平，但迪卡普里奧至今尚未獲得過奧斯卡獎。</div>
<div class="text text1">奧斯卡金像獎之前，迪卡普里奧獲得本年度英國電影和電視藝術(shù)學(xué)院（BAFTA）最佳男主角獎。該獎項(xiàng)被認(rèn)為是奧斯卡金像獎的前奏。盡管他曾經(jī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>

以上代碼簡單實(shí)現(xiàn)了文字超出部分隱藏的功能，希望大家喜歡。

您可能感興趣的文章:

相關(guān)文章

layui前端框架之table表數(shù)據(jù)的刷新方法
今天小編就為大家分享一篇layui前端框架之table表數(shù)據(jù)的刷新方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
GoJs?圖片繪圖模板Picture使用示例詳解
這篇文章主要為大家介紹了GoJs?圖片繪圖模板Picture使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-04-04
JS淺拷貝和深拷貝原理與實(shí)現(xiàn)方法分析
這篇文章主要介紹了JS淺拷貝和深拷貝原理與實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了javascript淺拷貝及深拷貝相關(guān)概念、原理、實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下
2019-02-02
Javascript中parseInt的正確使用方式
今天小編就為大家分享一篇關(guān)于Javascript中parseInt的正確使用方式，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧
2018-10-10
Nautil 中使用雙向數(shù)據(jù)綁定的實(shí)現(xiàn)
這篇文章主要介紹了Nautil 中使用雙向數(shù)據(jù)綁定的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-10-10
微信小程序template模板與component組件的區(qū)別和使用詳解
這篇文章主要介紹了微信小程序template模板與component組件的區(qū)別和使用詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-05-05
JavaScript在瀏覽器標(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-03
JavaScript 實(shí)現(xiàn) Tab 點(diǎn)擊切換實(shí)例代碼
Tab 選項(xiàng)卡切換效果在現(xiàn)如今的網(wǎng)頁中，運(yùn)用的也是比較多的，包括點(diǎn)擊切換、滑動切換、延遲切換、自動切換等多種效果，在這篇博文里，我們是通過原生 JavaScript 來實(shí)現(xiàn) Tab 點(diǎn)擊切換的效果。
2017-03-03
JavaScript實(shí)現(xiàn)Tab選項(xiàng)卡切換
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)Tab選項(xiàng)卡切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-02-02
JavaScript框架是什么?怎樣才能叫做框架？
這篇文章主要介紹了JavaScript框架是什么?怎樣才能叫做框架？,本文講解了什么是 JavaScript 框架、JavaScript 框架的典型特性等內(nèi)容,需要的朋友可以參考下
2015-07-07