截取指定长度字符串长度代码实例
分类：实例代码
字符串的长度在默认状态下往往不能够满足需求，比如新闻列表新闻标题的长度，如果过长往往会引起换行，影响美观度，进而一项用户体验，所以需要根据需要截取字符串长度，下面就分享两端能够实现此功能的代码，希望对大家有所帮助。
代码示例如下:
一.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>
截取指定长度字符串长度代码实例，这样的场景在实际项目中还是用的比较多的，关于截取指定长度字符串长度代码实例就介绍到这了。
截取指定长度字符串长度代码实例属于前端实例代码，有关更多实例代码大家可以查看。