How to truncate text based on element width, angular?

Question

I have String text and I want to show how many words I hide based on screen width.

This is what I have so far:

 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;
        };
    });

This filter works for fixed count of words. If words = 5 means we can see only 5 words and other will be hidden.

But I looking for way to make words number dynamic based on element width. For example for <div> width 200 px I show 12 words, (maybe more maybe less), for 40px - or zero words (if word too long) or one word,

I think I need mix with some directive that should take element width and calculate words number.

This is a Demo:

DEMO

enter image description here

Thank you very much for help,

Jerrad · Accepted Answer · 2014-05-26 11:12:17Z

3

Here's a directive I whipped up:

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;          
            });
        }
    };
});

The logic is all in the link function, and it mostly uses your own code. Usage is like this:

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

where <width> is the width you want the div to be, and <text> is the text you want displayed. I used a simple formula of width/15 to determine the number of words to show. You would probably want to come up with something a little more sophisticated.

Here's a Fiddle showing it in action.

edited May 26, 2014 at 11:12

answered May 25, 2014 at 23:35

Jerrad

5,3001 gold badge20 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

snaggs Over a year ago

BTW, you took average word length scope.width / 15 that is some cases makes this logic wrong

Jerrad Over a year ago

I just pulled that formula out of a hat. I figured you would want to come up with your own anyway.

Collectives™ on Stack Overflow

How to truncate text based on element width, angular?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related