js文字超出部分隐藏 显示查看更多

一、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:

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

JS:

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

二、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:

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

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'
        }
    }
  • 1
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
你可以使用CSS中的overflow属性来控制超出高度的内容的显示方式。以下是一些常见的方法: 1. 自动滚动:使用overflow: auto;属性,当内容超出高度时,会自动添加滚动条,让用户能够滚动查看超出部分。 2. 隐藏超出部分:使用overflow: hidden;属性,当内容超出高度时,会隐藏超出部分,只显示可见部分。 3. 显示更多:使用JavaScript和CSS结合的方式,当内容超出高度时,在底部添加一个“显示更多按钮或链接,点击展开超出部分。 以下是一个基本的JavaScript和CSS结合的“显示更多”功能的例子: HTML部分: ``` <div class="container"> <div class="content"> <!-- 此处是超出高度的内容 --> </div> <a href="#" class="more">显示更多</a> </div> ``` CSS部分: ``` .container { max-height: 200px; /* 设置最大高度 */ overflow: hidden; position: relative; } .content { /* 其他样式 */ } .more { position: absolute; bottom: 0; left: 0; width: 100%; background-color: #fff; text-align: center; padding: 10px; color: #333; text-decoration: none; transition: all 0.3s ease-in-out; } .more:hover { background-color: #333; color: #fff; } ``` JavaScript部分: ``` $(document).ready(function() { var showChar = 200; // 显示的字符数 var ellipsestext = "..."; var moretext = "显示更多"; var lesstext = "收起"; $('.container .content').each(function() { var content = $(this).html(); if(content.length > showChar) { var c = content.substr(0, showChar); var h = content.substr(showChar, content.length - showChar); var html = c + '<span class="moreelipses">' + ellipsestext + '</span><span class="morecontent"><span>' + h + '</span><a href="" class="morelink">' + moretext + '</a></span>'; $(this).html(html); } }); $(".morelink").click(function() { if($(this).hasClass("less")) { $(this).removeClass("less"); $(this).html(moretext); } else { $(this).addClass("less"); $(this).html(lesstext); } $(this).parent().prev().toggle(); $(this).prev().toggle(); return false; }); }); ``` 这个例子中,当内容超出高度时,会在底部添加一个“显示更多按钮点击展开超出部分。你可以根据自己的需求修改显示的字符数、按钮文字等。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值