search

Narutocc / angular

:hear_no_evil:AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.
1 stars 0 forks source link

多种方式实现文本省略(ng) #3

Open Narutocc opened 7 years ago

Narutocc commented 7 years ago

第一种：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>

效果图如下： 1

Narutocc commented 7 years ago

第四种：WebKit浏览器或移动端的页面

在WebKit浏览器或移动端（绝大部分是WebKit内核的浏览器）的页面实现比较简单，可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp ； 注意：这是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。 常见结合属性：

  1. display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
  2. -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
  3. text-overflow:ellipsis;，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

这个属性比较合适WebKit浏览器或移动端（绝大部分是WebKit内核的）浏览器。