如何根据元素宽度，角度截断文本？

Question

我有字符串文字，我想根据屏幕宽度显示我隐藏的字数。

这是我到目前为止所做的：

 app.filter('words', function () {
        return function (input, words) {
            if (isNaN(words)) return input;
            if (words <= 0) return '';
            if (input) {
                var inputWords = input.split(/\s+/);
                if (inputWords.length > words) {

                    var theLength = inputWords.length - words;

                    input = inputWords.slice(0, words).join(' ') + ' + ' + theLength;
                }
            }
            return input;
        };
    });

此过滤器适用于固定的单词数。如果words = 5表示我们只能看到5个单词而其他单词将被隐藏。

但我正在寻找基于元素宽度使words数字动态化的方法。例如，对于<div>宽度200像素，我显示12个字，（可能更多可能更少），40px - 或零字（如果字太长）或一个字，

我认为我需要混合一些应该采用元素宽度并计算words数字的指令。

这是一个演示：

DEMO

非常感谢您的帮助，

Answer 1

这是我掀起的指令：

app.directive('wordCount', function($compile){
    return{
        restrict: 'E',
        replace: true,
        scope: {
            width: '=',
            text: '='
        },
        template: '<div style ="border-style: solid; width:{{width}}px"><span>{{text}}</span></div>',        
        link: function(scope, element, attrs){            
            scope.$watch('width', function(value){          
                if(isNaN(scope.width) || scope.width < 0)
                    return;
                var numWords = Math.floor(scope.width / 15); 
                var inputWords = scope.text.split(/\s+/);
                var theLength = inputWords.length - numWords;
                console.log('Element width: ' + scope.width);
                console.log("# of words: " + inputWords.length);
                console.log("# of words to show: " + numWords);

                element[0].innerHTML = inputWords.slice(0, numWords).join(' ') + ' + ' + theLength;          
            });
        }
    };
});

逻辑全部在link函数中，它主要使用您自己的代码。用法是这样的：

<word-count width="<width>" text="<text>"></word-count>

其中<width>是您想要div的宽度，<text>是您要显示的文本。我使用了width/15的简单公式来确定要显示的单词数。你可能想要提出一些更复杂的东西。

这是Fiddle显示它的实际效果。