感兴趣js 文字超出部分隐藏、点击显示更多示例的小伙伴，下面一起跟随编程之家 的小编来看看吧。
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'
}
}
总结
如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
小编个人微信号 jb51ccc
喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！
