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>

截取前效果：

 

截取后效果：

转载于:https://www.cnblogs.com/banzhiyan304053078/p/6704891.html