第一种：css实现省略
<style>
/*css省略*/
p{
width:80px;
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
}
</style>
第二种：js实现省略
<script>
// js省略
var str = 'narutonaruto';
if(str.length > 5){
str = str.slice(0,5);
console.log(str + '...');
}else{
console.log(str)
}
</script>
第三种：angular实现省略
<script src="js/angular.js"></script>
<script>
// AngularJS :limitTo省略
angular.module('myApp',[]).controller('myCtrl',['$scope',function($scope){
$scope.arrs = [{
title:'111'
},{
title:'1111'
},{
title:'11111111'
},{
title:'111111111111'
}]
}])
</script>
html结构：
<body>
<h4>css样式实现省略功能</h4>
<p>narutonaruto</p>
<p>naruto</p>
<br><br>
<div ng-controller="myCtrl">
<!--limitTo:截取的长度 截取的起始坐标-->
<h4>angular实现省略功能</h4>
<div ng-repeat="arr in arrs">{{arr.title|limitTo:5:5}}...</div>
</div>
</body>
效果图如下：
第一种：css实现省略
第二种：js实现省略
第三种：angular实现省略
html结构：
效果图如下：
