首页 > 代码库 > 文字超长省略号显示

文字超长省略号显示

2024-09-17 23:40:43   217人阅读

　　有的时候，会有超长数据存在而导致显示框装不下的情况。

　　最开始遇到这种问题时，并不知道 css 中有简单的超长文字省略号显示样式设置，所以进行了很麻烦的 js 操作，记得是使用的 d3 插件绘制树形图，然后获取当前显示框宽度，获取文字大小，计算数据的总共长度，判断是否超长，超长后要减去三个小数点的长度，再对能显示部分数据的截取，拼接三个小数点，达到这种效果，现在想想，真是觉得当初好稚嫩，不过动动脑子处理问题也觉得挺有意思的呢！

　　css 文字超出隐藏设置很简单：

　　1、有一个最大宽度：max-width

　　2、设置文字超长不换行（一行显示）：white-space: nowrap;

　　3、超出部分隐藏：overflow:hidden;

　　4、最后设置省略号：text-overflow:ellipsis;

　　demo：

<!DOCTYPE html>
<html ng-app=‘myApp‘>
    <head>
        <meta charset="utf-8">
        <style>
            #d2{
                max-width:50px;
                white-space: nowrap;
                overflow:hidden;
                text-overflow:ellipsis;
            }
        </style>
    </head>
    <body ng-controller=‘myCtrl‘>
        <div id=‘d1‘>{{showName}}</div>
        <div id=‘d2‘>{{showName}}</div>
        <script src=‘angular.js‘></script>
        <script>
        angular.module(‘myApp‘,[]).controller(‘myCtrl‘,function($scope){
            $scope.name=‘Alice‘;
            $scope.aaa=true;
            $scope.bbb=false;
            $scope.ccc=true;
            $scope.showName=‘aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa‘
        })
        </script>
    </body>
</html>

 

文字超长省略号显示


联系
我们