Limiting string up to a specified length in JavaScript

Truncating strings to a specified length is a common requirement in JavaScript applications, especially for displaying previews or fitting text within UI constraints. This article shows how to limit string length and append ellipsis when truncation occurs.

Problem

We need to write a JavaScript function that takes a string and a number. The function should return the truncated version of the string up to the given limit followed by "..." if the result is shorter than the original string. Otherwise, it should return the same string if nothing was truncated.

Using String.slice() Method

The most straightforward approach uses the slice() method to extract a portion of the string:

const str = 'Testing String';
const num = 8;

const limitString = (str = '', num = 1) => {
    const { length: len } = str;
    if(num < len){
        return str.slice(0, num) + '...';
    }else{
        return str;
    };
};

console.log(limitString(str, num));
console.log(limitString('Short', 10));

Testing ...
Short

Using String.substring() Method

An alternative approach using substring() method:

const truncateText = (text, maxLength) => {
    if (text.length <= maxLength) {
        return text;
    }
    return text.substring(0, maxLength) + '...';
};

console.log(truncateText('JavaScript Programming', 10));
console.log(truncateText('Hello', 10));

JavaScript...
Hello

Word-Aware Truncation

To avoid cutting words in the middle, we can truncate at word boundaries:

const truncateAtWord = (text, maxLength) => {
    if (text.length <= maxLength) {
        return text;
    }
    
    const truncated = text.substring(0, maxLength);
    const lastSpace = truncated.lastIndexOf(' ');
    
    if (lastSpace > 0) {
        return truncated.substring(0, lastSpace) + '...';
    }
    
    return truncated + '...';
};

console.log(truncateAtWord('JavaScript is a programming language', 15));
console.log(truncateAtWord('OneVeryLongWord', 8));

JavaScript is...
OneVeryL...

Comparison

Common Use Cases

// Article previews
const articles = [
    'JavaScript is a versatile programming language used for web development',
    'CSS helps style web pages',
    'HTML structures web content'
];

const createPreviews = (articles, limit = 20) => {
    return articles.map(article => {
        return article.length > limit 
            ? article.substring(0, limit) + '...'
            : article;
    });
};

console.log(createPreviews(articles));

[ 'JavaScript is a ver...', 'CSS helps style web...', 'HTML structures web...' ]

Conclusion

String truncation is essential for maintaining clean UI layouts. Use simple character-based methods for quick truncation, or implement word-aware truncation for better user experience when displaying text content.