zoukankan      html  css  js  c++  java
  • js新闻摘要截取部分文字

    CSS样式:
    
    <style>
    *{margin:0; padding:0;}
    ul,li{list-style:none;}
    #news{width:600px; overflow:hidden; margin:30px auto; border:1px solid #999;}
    #news ul{width:100%; overflow:hidden;}
    #news ul li{width:100%; overflow:hidden; border-top:1px solid #999;}
    #news ul li:nth-child(1){border-top:none;}
    #news ul li .new_title{height:40px; line-height:40px;} 
    #news ul li .paragraph{line-height:40px; text-align:justify; text-indent:2rem;}
    </style>
    HTML结构:
    
    <div id="news">
        <ul>
        	<li>
                <p class="new_title">标题一</p>
                <p class="paragraph" data-type="paragraph">北方的村庄住着一个南方的姑娘/她总是喜欢穿着带花的裙子站在路旁/她的话不多但笑起来是那么平静悠扬/她柔弱的眼神里装的是什么 是思念的忧伤/南方的小镇阴雨的冬天没有北方冷/她不需要臃肿的棉衣去遮盖她似水的面容/她在来去的街头留下影子芳香才会某然的心痛/眨眼的时间芳香已飘散影子已不见/南方姑娘 你是否习惯北方的秋凉/南方姑娘 你是否喜欢北方人的直爽/日子过的就像那些不眠的晚上/她嚼着口香糖对墙满谈着理想/南方姑娘 我们都在忍受着漫长/南方姑娘 是不是高楼遮住了你的希望/昨日的雨曾淋漓过她瘦弱的肩膀/夜空的北斗也没有让她找到迷途的方向/阳光里她在院子中央晾晒着衣裳/在四季的风中她散着头发安慰着时光/南方姑娘 你是否爱上了北方/南方姑娘 你说今天你就要回到你的家乡/思念让人心伤 她呼唤着你的泪光/南方的果子已熟 那是你简单的理想</p>
            </li>
            <li>
                <p class="new_title">标题二</p>
                <p class="paragraph" data-type="paragraph">北方的村庄住着一个南方的姑娘/她总是喜欢穿着带花的裙子站在路旁/她的话不多但笑起来是那么平静悠扬/她柔弱的眼神里装的是什么 是思念的忧伤/南方的小镇阴雨的冬天没有北方冷/她不需要臃肿的棉衣去遮盖她似水的面容/她在来去的街头留下影子芳香才会某然的心痛/眨眼的时间芳香已飘散影子已不见/南方姑娘 你是否习惯北方的秋凉/南方姑娘 你是否喜欢北方人的直爽/日子过的就像那些不眠的晚上/她嚼着口香糖对墙满谈着理想/南方姑娘 我们都在忍受着漫长/南方姑娘 是不是高楼遮住了你的希望/昨日的雨曾淋漓过她瘦弱的肩膀/夜空的北斗也没有让她找到迷途的方向/阳光里她在院子中央晾晒着衣裳/在四季的风中她散着头发安慰着时光/南方姑娘 你是否爱上了北方/南方姑娘 你说今天你就要回到你的家乡/思念让人心伤 她呼唤着你的泪光/南方的果子已熟 那是你简单的理想</p>
            </li>
            <li>
                <p class="new_title">标题三</p>
                <p class="paragraph" data-type="paragraph">北方的村庄住着一个南方的姑娘/她总是喜欢穿着带花的裙子站在路旁/她的话不多但笑起来是那么平静悠扬/她柔弱的眼神里装的是什么 是思念的忧伤/南方的小镇阴雨的冬天没有北方冷/她不需要臃肿的棉衣去遮盖她似水的面容/她在来去的街头留下影子芳香才会某然的心痛/眨眼的时间芳香已飘散影子已不见/南方姑娘 你是否习惯北方的秋凉/南方姑娘 你是否喜欢北方人的直爽/日子过的就像那些不眠的晚上/她嚼着口香糖对墙满谈着理想/南方姑娘 我们都在忍受着漫长/南方姑娘 是不是高楼遮住了你的希望/昨日的雨曾淋漓过她瘦弱的肩膀/夜空的北斗也没有让她找到迷途的方向/阳光里她在院子中央晾晒着衣裳/在四季的风中她散着头发安慰着时光/南方姑娘 你是否爱上了北方/南方姑娘 你说今天你就要回到你的家乡/思念让人心伤 她呼唤着你的泪光/南方的果子已熟 那是你简单的理想</p>
            </li>
        </ul>
    </div>
    
    js代码:
    
    <script type="text/javascript">
    function ellipsis(obj,num){          //需要截取文字所在的元素  截取长度
        var oSpan = document.createElement("span");     //创建一个标签用于存放省略号
        oSpan.innerHTML = obj.innerHTML.length > num ? "...":"";
        obj.innerHTML = obj.innerHTML.substring(0,num);         //substring(a,b):截取由a开始到b结束   substr(a,b):截取由a开始,截取长度为b
        obj.appendChild(oSpan);
    }
    /*获取元素属性*/
    function getElements(obj,attr,value){
        var arr = new Array();
        for(var i=0;i<obj.length;i++){
            if(obj[i].getAttribute(attr)==value){
                arr.push(obj[i]);
            }
        }
        return arr;    
    }
    var oNews = document.getElementById("news");
    var aP = oNews.getElementsByTagName("p");
    var aPara = getElements(aP,"data-type","paragraph");
    for(var i=0;i<aPara.length;i++){
        ellipsis(aPara[i],100);
    }
    </script>

    截取前效果:

    截取后效果:

  • 相关阅读:
    蓝绿发布、灰度发布和滚动发布
    centos网卡配置修改
    服务器安装centos8提示显示器不支持输出的分辨率
    Linux软件包管理
    Redis (error) NOAUTH Authentication required.解决方法
    mysql5.7.35数据库迁移
    MySQL5.7的参数优化
    mysql 安装完以后没有mysql服务
    Promise结合setTimeout--promise练习题(2)
    基础题--promise练习题(1)
  • 原文地址:https://www.cnblogs.com/banzhiyan304053078/p/6704891.html
Copyright © 2011-2022 走看看