How to Truncate Text in a Wix Repeater Using Velo

Displaying dynamic content in a repeater is one of Wix's most powerful features, but sometimes, your content can disrupt the design. For instance, long text—such as blog titles or product names—can make your repeater look inconsistent and cluttered. A great way to solve this is by truncating the text to a specific number of characters and adding "..." to indicate that it has been shortened.

In this guide, I'll show you how to truncate text dynamically in a repeater using Velo by Wix, with blog titles as an example. This method works for any type of text in a repeater, such as product descriptions, event names, or service titles.

Why Truncate Text?

Long text can:

• Overflow or wrap awkwardly, disrupting your layout.

• Make your design look unbalanced or inconsistent.

• Overwhelm visitors with unnecessary details.

Truncating text ensures a clean, consistent layout while still conveying key information.

Step-by-Step Guide to Truncate Text in a Repeater

1. Add a Repeater to Your Page

1. In the Wix Editor, drag a Repeater onto your page.

2. Connect the repeater to a dataset. For this example, connect it to the Blog Posts dataset to display dynamic blog titles.

3. Link the text element in the repeater to the field you want to display, such as title for blog titles.

2. Add the Truncation Code in Velo

Now, use the following Velo code to truncate the text dynamically:

$w.onReady(function () {
    // Wait for the dataset to load
    $w("#dataset1").onReady(() => {
        // Iterate through each item in the repeater
        $w("#repeater1").forEachItem(($item, itemData) => {
            // Get the text field from the dataset (e.g., blog title)
            let originalText = itemData.title; // Replace 'title' with the correct field key if needed

            // Truncate the text if it's longer than 55 characters
            if (originalText && typeof originalText === "string") {
                let truncatedText = originalText.length > 55
                    ? originalText.substring(0, 55) + "..."
                    : originalText;
                // Set the truncated text to the text element in the repeater
                $item("#text135").text = truncatedText;
            } else {
                $item("#text135").text = ""; // Default to empty text or placeholder
            }
        });
    });
});

Code Breakdown

1. Dataset Loading: The onReady method ensures the dataset is fully loaded before processing the data.

2. Repeater Iteration: The forEachItem method loops through each item in the repeater. For every item, it retrieves the data from the dataset.

3. Truncate the Text: The substring method limits the text to 55 characters and adds "..." to indicate truncation.

4. Default Handling: If the text field is missing or invalid, the code sets the text element to an empty string to avoid errors.

Example Use Case: Blog Titles

Let’s say your blog titles are connected to a repeater. Before truncation, the titles might look like this:

Before:

• "How to Use Wix for Dynamic Pages and Repeaters"

• "Mastering SEO Settings in Wix Blog Posts for Better Rankings"

• "10 Tips for Creating a Professional Website with Wix"

After applying the code, they’ll display like this:

After:

• "How to Use Wix for Dynamic Pages an..."

• "Mastering SEO Settings in Wix Blog P..."

• "10 Tips for Creating a Professional ..."

This approach keeps your repeater design neat and balanced, even with long titles.

Where Else Can This Be Used?

This truncation technique is not limited to blog titles! You can apply it to any text displayed in a repeater, such as:

• Product Names: Shorten long product titles in an e-commerce store.

• Event Names: Truncate event titles in an events listing.

• Service Descriptions: Display concise service names or summaries.

Debugging Tips

If the text isn’t displaying correctly:

1. Verify Dataset Connection:

   • Ensure the dataset is properly connected to the repeater.

2. Check Element IDs:

   • Confirm the IDs of your dataset (#dataset1), repeater (#repeater1), and text element (#text135).

3. Inspect the Field Key:

   • Make sure you’re using the correct field key from the dataset (e.g., title for blog titles).

4. Log Data:

   • Add console.log(itemData.title); inside the loop to check the data being retrieved.

Using Velo to truncate text in a repeater gives you complete control over how dynamic content is displayed on your site. While this guide uses blog titles as an example, the same approach can be adapted for any type of text. With just a few lines of code, you can ensure your repeater looks professional and visually consistent.

Do you have more questions about customizing repeaters or working with Velo? Leave a comment below or contact WixCreate for personalized guidance!