快捷導(dǎo)航

基于JavaScript實(shí)現(xiàn)文字超出部分隱藏

更新時(shí)間：2016年02月29日 17:01:34 作者：種花家的小白兔

這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)文字超出部分隱藏的相關(guā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)三次被提名參選，影迷們也一直為他鳴不平，但迪卡普里奧至今尚未獲得過(guò)奧斯卡獎(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)三次被提名參選，影迷們也一直為他鳴不平，但迪卡普里奧至今尚未獲得過(guò)奧斯卡獎(jiǎng)。但迪卡普里奧至今尚未獲得過(guò)奧斯卡獎(jiǎng)。但迪卡普里奧至今尚未獲得過(guò)奧斯卡獎(jiǎng)。</div>
<script>
//根據(jù)class名稱(chēng)獲取元素,此案例中之所以要用class獲取元素名稱(chēng),是為了可以控制多個(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)了文字超出部分隱藏的功能，希望大家喜歡。

您可能感興趣的文章:

相關(guān)文章

layui radio點(diǎn)擊事件實(shí)現(xiàn)input顯示和隱藏的例子
今天小編就為大家分享一篇layui radio點(diǎn)擊事件實(shí)現(xiàn)input顯示和隱藏的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-09-09
原生JS實(shí)現(xiàn)簡(jiǎn)單的無(wú)縫自動(dòng)輪播效果
輪播效果是老生常談的話題，今天小編通過(guò)實(shí)例代碼給大家分享原生JS實(shí)現(xiàn)簡(jiǎn)單的無(wú)縫自動(dòng)輪播效果，感興趣的朋友跟隨小編一起學(xué)習(xí)吧
2018-09-09
3分鐘掌握常用的JS操作JSON方法總結(jié)
工作中做了幾款自動(dòng)化測(cè)試工具都是跟日志讀取相關(guān)，日志格式又大多數(shù)都是JSON，所以這里把常用的JS操作JSON的方法做了總結(jié)
2017-04-04
微信小程序?qū)崿F(xiàn)購(gòu)物車(chē)選擇規(guī)格顏色效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)購(gòu)物車(chē)選擇規(guī)格顏色選中效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-01-01
JavaScript實(shí)現(xiàn)簡(jiǎn)單的tab選項(xiàng)卡切換
這篇文章主要介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單的tab選項(xiàng)卡切換的相關(guān)資料,需要的朋友可以參考下
2016-01-01
關(guān)于微信小程序獲取小程序碼并接受buffer流保存為圖片的方法
這篇文章主要介紹了關(guān)于微信小程序獲取小程序碼并接受buffer流保存為圖片的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用小程序具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧<BR>
2019-06-06
僅IE支持clearAttributes/mergeAttributes方法使用介紹
僅IE中HTMLElement元素具有clearAttributes/mergeAttributes方法，它們都是非標(biāo)準(zhǔn)的
2012-05-05
微信小程序自定義導(dǎo)航欄
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義導(dǎo)航欄，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-12-12
JavaScript?管道運(yùn)算符及工作原理
這篇文章主要介紹了JavaScript?管道運(yùn)算符,管道運(yùn)算符為我們的代碼添加了大量上下文，并簡(jiǎn)化了操作，以便以后可以擴(kuò)展它們，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2023-05-05
在IE,Firefox,Safari,Chrome,Opera瀏覽器上調(diào)試javascript
前支持javascript調(diào)試功能的工具越來(lái)越多，主要分為ie和firefox兩大陣營(yíng)。其他瀏覽器上很難調(diào)試javascript。而Javascript Debug Toolkit解決了這個(gè)問(wèn)題，可能在所有支持ajax請(qǐng)求的瀏覽器上調(diào)試javascript.
2008-12-12