截取指定长度字符串长度代码实例

快乐打工仔 分类:实例代码

字符串的长度在默认状态下往往不能够满足需求,比如新闻列表新闻标题的长度,如果过长往往会引起换行,影响美观度,进而一项用户体验,所以需要根据需要截取字符串长度,下面就分享两端能够实现此功能的代码,希望对大家有所帮助。

代码示例如下:

一.CSS方式:

html代码:

<div class="cutText">犀牛前端部落欢迎您,只有奋斗才会有美好的明天!</div>

CSS代码:

.cutText{ 
  width:150px; 
  height:24px; 
  overflow:hidden; 
  white-space:nowrap; 
  text-overflow:ellipsis; 
  text-overflow: ellipsis;/* IE/Safari */ 
  -ms-text-overflow: ellipsis; 
  -o-text-overflow: ellipsis;/* Opera */ 
  -moz-binding: url("ellipsis.xml#ellipsis");/*FireFox*/ 
}

此方式规定了长度,如果超过此长度,就会以省略号表示。

二.jquery截取字符串:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>截取字符串长度-犀牛前端部落</title>
<style type="text/css">
ul{
  width:300px;
  height:300px;
  margin:0px auto;
  list-style:none;
}
ul li{
  height:30px;
  line-height:30px;
  font-size:12px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$.fn.substr=function(length,content){ 
  $(this).each(function(i,item){ 
    var val=$(item).html(); 
    if(!val) return; 
    if(val.length>length){ 
      val=val.substring(0,length); 
      val+=content||"...";
      $(item).html(val); 
    } 
  })
} 
function subTdContent(){ 
  $('li').substr(18); 
} 
$(document).ready(function(){
  subTdContent();
})
</script> 
</head> 
<body> 
<ul>
  <li>犀牛前端部落欢迎您,只有奋斗才会有美好的明天</li>
  <li>每一天都是新的,要好好把握。</li>
  <li>永远不要想着明天,因为当下才是最真切的。</li>
  <li>没有任何人一开始就是高手,都是从菜鸟成长而来的</li>
</ul>
</body> 
</html>

截取指定长度字符串长度代码实例,这样的场景在实际项目中还是用的比较多的,关于截取指定长度字符串长度代码实例就介绍到这了。

截取指定长度字符串长度代码实例属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容