Contributor I

Solved

How to truncate text with css - content pulled using a variable

Forum|Forum|3 years ago
November 11, 2022
4 replies
462 views

Hi all,

I was wondering if there is a way to truncate text pulled using a variable.
I’m currently feeding content from a website using rss.app into a klaviyo template. I’m using the following variable to grab text;

Added this to the source code from a text box in Klaviyo.

<div>Description: {{ item.description }}</div>

Sometimes the description is very long and I would like to truncate to about 200 words. Is this possible?

This topic has been closed for replies.

Best answer by GrantDeken

@EduardoRuiz you can dress this up a little using the following css (see jsfiddle for example)

text-overflow: ellipsis;
white-space: nowrap;

https://jsfiddle.net/6wx5bd0g/

E

EduardoRuizAuthor

Contributor I

I found the solution. I’m using the following;

div.wrapper {
overflow: hidden;
width: 540px;
height: 200px;
}

Then

<div class="wrapper">Description: {{ item.description }}</div>

GrantDekenAnswer

Problem Solver I

@EduardoRuiz you can dress this up a little using the following css (see jsfiddle for example)

text-overflow: ellipsis;
white-space: nowrap;

https://jsfiddle.net/6wx5bd0g/

Grant Deken

E

EduardoRuizAuthor

Contributor I

@EduardoRuiz you can dress this up a little using the following css (see jsfiddle for example)

text-overflow: ellipsis;
white-space: nowrap;

https://jsfiddle.net/6wx5bd0g/

Thank you,

This is currently working in Gmail and Outlook on Mac, Outlook on mobile, except Outlook on Desktop. Any idea how I can force this to work no matter what email client a user is using?

GrantDeken

Problem Solver I

The older way of doing it is using the ::after psuedoselector. This might be better supported but you’ll have to play around with it.

Something like...

.container::after {

   content: “...”;

}

Let me know what you find with Outlook, I’m curious.

G

Grant Deken

Sign up

Use your Klaviyo credentials

Log in to the Community

Use your Klaviyo credentials