擷取指定長度字串長度程式碼例項

antzone發表於2017-04-18
字串

字串的長度在預設狀態下往往不能夠滿足需求，比如新聞列表新聞標題的長度，如果過長往往會引起換行，影響美觀度，進而一項使用者體驗，所以需要根據需要擷取字串長度，下面就分享兩端能夠實現此功能的程式碼，希望對大家有所幫助。

程式碼示例如下:

一.CSS方式:

html程式碼:

[HTML] 純文字檢視 複製程式碼
<div class="cutText">螞蟻部落歡迎您，只有奮鬥才會有美好的明天！</div>

CSS程式碼:

[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擷取字串:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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>


相關文章