有的时候，会有超长数据存在而导致显示框装不下的情况。
最开始遇到这种问题时，并不知道 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>
时间： 2024-08-06 11:06:46