这篇文章主要为大家详细介绍了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笔记的其他信息。

关键词：文字隐藏