angularjs 内容超出三行隐藏并显示省略号 怎么搞呀急呀（浏览器兼容属性）

-webkit-line-clamp 属性只有谷歌支持，IE，Firefox都不支持，好无奈呀
用伪元素  " :after " 省略号不紧跟内容，且不好控制省略号位置
clamp.js 不好使用呀，<!DOCTYPE html>
<html ng-app="myapp">
<head >
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
<style>
#box {
line-height: 20px;
font-size: 14px;
width: 300px;
max-height: 60px;
overflow : hidden;
word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div ng-controller="myctrl" >
<div id="pox">
<span id="box" title="{{data}}">{{data}}</span>
</div>
</div>
<script type="text/javascript">
var app = angular.module("myapp",[]);
app.controller("myctrl", ["$scope", function($scope){
$scope.data = "ffddddddddddddddddddddddddddddddddddddddffffffffffffffffddddddddddddddddddddddddddddddddddddddddddddddddddddffddddddddddddddddddddddddddddddddddddddffffffffffffffffdddddddddddddddddddddddddddddddddddddddddddddddddddd";
}]);
</script>
</body>
</html>
以上代码只有谷歌生效，IE和Firefox都不行网上都说只能用JS，但怎么搞通过高度递归截取也不行呀，大神们，求解呀！！！

解决方案 »

  1.   

    遇到跟你差不多的问题，是用clamp.js 解决的
    只是要注意在ng-repeat之后再执行 $clamp(paragraph[i], {clamp: 3,useNativeClamp: false, animate: true});
    我具体的做法是在网络请求完成（得到ng-repeat数据）之后，写了一个延时：
    setTimeout(function () {
                 // 要在ng-repeat执行完成之后再加载
                        var paragraph = document.getElementsByClassName('ll');
                        for(var i = 0 ; i < paragraph.length; i++){
                            $clamp(paragraph[i], {clamp: 3,useNativeClamp: false, animate: true});
                        }
                 },200)
    不是什么大神，这种笨笨的方法解决了问题就没管了····