Skip to main content
Solved

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

  • November 11, 2022
  • 4 replies
  • 320 views

Forum|alt.badge.img+2

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? 

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/

View original
Did this topic or the replies in the thread help you find an answer to your question?

4 replies

Forum|alt.badge.img+2
  • Author
  • Contributor I
  • 2 replies
  • November 11, 2022

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>


GrantDeken
Problem Solver I
Forum|alt.badge.img+3
  • Problem Solver I
  • 7 replies
  • Answer
  • November 11, 2022

@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/


Forum|alt.badge.img+2
  • Author
  • Contributor I
  • 2 replies
  • November 11, 2022
GrantDeken wrote:

@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
Forum|alt.badge.img+3
  • Problem Solver I
  • 7 replies
  • November 11, 2022

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