文字超长省略号显示

Posted 名字不好起啊

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了文字超长省略号显示相关的知识,希望对你有一定的参考价值。

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

  最开始遇到这种问题时,并不知道 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>

 

以上是关于文字超长省略号显示的主要内容,如果未能解决你的问题,请参考以下文章

CCS3超长文字显示省略号的方法

CSS 文字超长省略显示并隐藏超长部分

css实现多行文字超长,显示..., 添加展开,收起

元素内文字超长时显示...,并通过title提示全部文字

div内多行文字, 溢出部分用省略号显示

标签内显示文字超过行宽度显示省略号