文字超长省略号显示

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

　　最开始遇到这种问题时，并不知道 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>
复制代码

 

posted @   名字不好起啊  阅读(818)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示
SQL AI 助手