js 文字超出部分隐藏、点击显示更多示例

这篇文章主要为大家详细介绍了js 文字超出部分隐藏、点击显示更多示例，具有一定的参考价值，可以用来参考一下。

*{
   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;
 }

<div>
    <p class="text-hide">一段文字,一段文字一段文字一段文字,一段文字一段文字一段文字,一段文字一段文字</p>
    <!-- 写了个空的标签用来放置超出预定字符 要展示的效果 -->
    <div class="click-show"></div>
</div>
<div>
    <p class="text-hide">不同的位置处理字体的隐藏，操作多个</p>
    <div class="click-show"></div>
</div>
<p class="text-hide">dfadfj</p>
<div class="click-show"></div>

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) + "<span class='check-more'>查看更多>></span>";
            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].onclick=function(){
                    divs[this.index].style.display = 'none';
                    ps[this.index].style.display = 'block';
                }
            }
        }
    }

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;
}

<p>月一段文字一段文字一段文字一段文字一段文字</p>
<p>月一段文字一段文</p>
<p>月一段文字一段文字一段文字一段文字一</p>

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 文字超出部分隐藏、点击显示更多示例的内容就先介绍到这里，更多相关文章的可以留意