Introduction:

Ever wondered how to make long paragraphs or titles more concise and easier to read on your website? Well, here’s a simple trick: add ellipses (…) to shorten the text and limit the number of characters displayed. In this article, we’ll show you how to do it using a bit of JavaScript. It’s easy to understand and implement, even if you’re not a coding expert!

How to Do It:

First, let’s take a look at the code snippet:

<p class="truncate-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<script>
// Function to truncate text and add ellipses
function truncateText(element, maxLength) {
    // Check if text length exceeds maxLength
    if (element.textContent.length > maxLength) {
        // Limit the text to maxLength characters
        const truncatedText = element.textContent.slice(0, maxLength);
        // Add ellipses
        element.textContent = truncatedText + '...';
    }
}

// Select the element
const element = document.querySelector('.truncate-text');

// Define the maximum character limit
const maxLength = 50;

// Call the function to truncate text with the specified character limit
truncateText(element, maxLength);
</script>

Explanation:

• The HTML part contains a paragraph (<p>) element with a class named “truncate-text”. This is the text we want to shorten.
• The JavaScript part is where the magic happens. It defines a function called truncateText that takes two inputs: the element containing the text and the maximum number of characters we want to display.
• Inside the function, it checks if the length of the text inside the element is longer than the maximum allowed. If it is, it cuts the text to the specified length and adds ellipses at the end (…).

Why It’s Useful:

• Easier Reading: Long paragraphs can be overwhelming. By shortening them and adding ellipses, you make it easier for your visitors to read and understand the content.
• Space Saver: Especially on small screens or in limited spaces, truncating text helps to save space and keep your website neat and tidy.
• Looks Professional: Adding ellipses to indicate that there’s more content gives your website a polished and professional look.

Conclusion:

Adding ellipses (…) to truncate text and limit the number of characters displayed on your website is a simple yet effective way to improve readability and save space. With just a few lines of JavaScript, you can make your content more user-friendly and visually appealing. Give it a try on your website, and see the difference it makes!