這篇文章主要為大家詳細介紹了js 文字超出部分隱藏、點擊顯示更多示例，具有一定的參考價值，可以用來參考一下。

感興趣js 文字超出部分隱藏、點擊顯示更多示例的小伙伴，下面一起跟隨512筆記的小編羅X來看看吧。

css：

*{

padding: 0;

margin: 0;

}

.text-hide{

width: 250px;

font-size: 16px;

color: #666;

border: 1px solid #ccc;

line-height: 24px;

}

.check-more{

margin-left: 5px;

font-size: 14px;

color: red;

cursor: pointer;

}

.click-show{

width: 250px;

border: 1px solid #ccc;

font-size: 16px;

color: #666;

line-height: 24px;

}

html:

一段文字,一段文字一段文字一段文字,一段文字一段文字一段文字,一段文字一段文字

不同的位置處理字體的隱藏，操作多個

dfadfj

var ps = document.querySelectorAll('.text-hide');

var divs = document.querySelectorAll('.click-show');

// 預定的字符串

var saveNum = 10;

for(var ins = 0; ins < ps.length; ins++){

ps[ins].index = ins;

var inner = ps[ins].innerHTML;

// 去空格兩兩之間只留有一個空格

var str = inner.split('');

for(var i = 0; i < str.length; i++){

if(str[i] == ' '){

str.splice(i,1);

}

}

// 去完空格之后的string

var newStr = str.join('')

var len = newStr.length;

// 大于保留的字符時顯示查看更多或...

if(len >= saveNum){

divs[ins].innerHTML = newStr.slice(0,saveNum) + "查看更多>>";

ps[ins].style.display = 'none';

}

// 如果有查看更多的話就可以點擊顯示當前被隱藏的信息了

if(document.querySelector('.check-more')){

var spans = document.querySelectorAll('.check-more');

for(var j = 0; j < spans.length; j++){

spans[j].index = j;

spans[j].οnclick=function(){

divs[this.index].style.display = 'none';

ps[this.index].style.display = 'block';

}

}

}

}

二、css+js超出隱藏：

CSS：

p{

width: 100px;

font-size: 16px;

line-height: 24px;

max-height: 48px;

overflow: hidden;

position: relative;

text-align: justify;

letter-spacing: .6px;

}

.hide:after{

content: "...";

width: 17px;

height: 24px;

position: absolute;

bottom: 0;

right: 0;

background: #fff;

}html：

月一段文字一段文字一段文字一段文字一段文字

月一段文字一段文

月一段文字一段文字一段文字一段文字一

js：

var els = document.querySelectorAll('p');

for(var i = 0; i < els.length; i++){

//大于等于兩行所占字符11時 增加...

if(els[i].innerHTML.length >= 11){

els[i].className = 'hide'

}

}

注：關于js 文字超出部分隱藏、點擊顯示更多示例的內容就先介紹到這里，更多相關文章的可以留意512筆記的其他信息。

關鍵詞：文字隱藏

總結

以上是生活随笔為你收集整理的html文字...点击后全部显示,js 文字超出部分隐藏、点击显示更多示例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。