Angular: Truncating text based on element width - A guide

Question

Angular: Truncating text based on element width - A guide

I am working on displaying a String text and determining how many words to hide based on the screen width.

Here is my current approach:

 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 wordCount = inputWords.length - words;

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

This filter currently works for a fixed count of words. For instance, if words is set to 5, only 5 words will be displayed while the rest are hidden.

However, I am looking for a way to make the number of words dynamic based on the width of the element. For example, if a <div> has a width of 200px, I want to show 12 words, adjusting the count based on the width.

I believe a directive that can take the element's width and calculate the appropriate number of words is needed.

Check out this Demo:

DEMO

Thank you in advance for your assistance.

javascript angularjs

Answer 1

Answer №1

Check out this custom directive I created:

app.directive('characterLimit', function($compile){
    return{
        restrict: 'E',
        replace: true,
        scope: {
            maxLength: '=',
            textContent: '='
        },
        template: '<div style ="border-style: solid; max-width:{{maxLength}}px"><span>{{textContent}}</span></div>',        
        link: function(scope, element, attrs){            
            scope.$watch('maxLength', function(value){          
                if(isNaN(scope.maxLength) || scope.maxLength < 0)
                    return;
                var charCount = Math.floor(scope.maxLength / 15); 
                var inputText = scope.textContent.split('');
                var excessChars = inputText.length - charCount;
                console.log('Element max width: ' + scope.maxLength);
                console.log("Number of characters: " + inputText.length);
                console.log("Characters to show: " + charCount);

                element[0].innerHTML = inputText.slice(0, charCount).join('') + ' + ' + excessChars;          
            });
        }
    };
});

The functionality is contained within the link function and heavily relies on your existing code. To use this directive, simply do the following:

<character-limit max-length="<maxWidth>" text-content="<textContent>"></character-limit>

In this case, <maxWidth> defines the maximum width for the div, while <textContent> represents the text you want to display. In my implementation, I used a basic calculation of maxLength/15 to determine the character limit. You may need to devise a more intricate approach based on your requirements.

Feel free to check out this Fiddle showcasing the directive in action.

Answer 2

Check out this custom directive I created:

app.directive('characterLimit', function($compile){
    return{
        restrict: 'E',
        replace: true,
        scope: {
            maxLength: '=',
            textContent: '='
        },
        template: '<div style ="border-style: solid; max-width:{{maxLength}}px"><span>{{textContent}}</span></div>',        
        link: function(scope, element, attrs){            
            scope.$watch('maxLength', function(value){          
                if(isNaN(scope.maxLength) || scope.maxLength < 0)
                    return;
                var charCount = Math.floor(scope.maxLength / 15); 
                var inputText = scope.textContent.split('');
                var excessChars = inputText.length - charCount;
                console.log('Element max width: ' + scope.maxLength);
                console.log("Number of characters: " + inputText.length);
                console.log("Characters to show: " + charCount);

                element[0].innerHTML = inputText.slice(0, charCount).join('') + ' + ' + excessChars;          
            });
        }
    };
});

The functionality is contained within the link function and heavily relies on your existing code. To use this directive, simply do the following:

<character-limit max-length="<maxWidth>" text-content="<textContent>"></character-limit>

In this case, <maxWidth> defines the maximum width for the div, while <textContent> represents the text you want to display. In my implementation, I used a basic calculation of maxLength/15 to determine the character limit. You may need to devise a more intricate approach based on your requirements.

Feel free to check out this Fiddle showcasing the directive in action.

Angular: Truncating text based on element width - A guide

Answer №1

Similar questions

Tips on utilizing ajax to load context without needing to refresh the entire page

Reordering elements in ng-repeat using Angular's orderBy filter for ascending sorting

Collection of components displayed in a row - Bootstrap 4

What is the best method for displaying an HTML string within an HTML file in Angular 5?

The Context API leaves me feeling lost and confused

AWS: Grant access to designated clients for users

The MobX computed function is triggered before the item is fully added to the array

"Struggling to make the 'overflow: hidden' property work for an absolutely positioned

Having trouble showing an image with jQuery after it has been uploaded

chart for visualizing two rows with matching IDs and dates

Creating a unique navigation route in React

Retrieve the values of private variables within a defined function

Validating Forms in AngularJS: Ensuring At Least One Input Field is Not Empty

Guide on displaying applicant name in the show route of your node.js/mongoDB application

Is it beneficial to incorporate keys into an express instance for improved functionality?

How should props be properly passed to NavItem components?

Tips on increasing the height of an element that is overflowing

The vast expanse of the cosmos, replacing the

Undefined value in Axios promise pending status in React

Leverage Webpack's File-Loader to Import Images