Limit text to display on blog listing page

[Marius]

Hi, in the blog list page, i want to limit the text to display in each blog post here. It can be easily done with post with  TEXT ONLY content with css like this:

.post-body-list {
    height: 300px;
    text-overflow: ellipsis;
    overflow: hidden;
}

However, sometime the post content can also contain  html elements  like <p>, <div> etc ( user can copy the content of other website and paste them to thier blog post). Is there a way to limit the text to display in this case?

[ndwilliams3 · Accepted solution]

in Design Manager on your blog listing template you can control the post summary and use filters to change the output.

Here's some options that may work for you.

Strip HTML tags

{{ content.post_list_content|striptags }}

strip HTML tags and trunicate

 {{ content.post_list_content|striptags|truncate(120, breakword=False, end='...')}}

 Trunicate and keep HTML tags intact

  {{ content.post_list_content|truncatehtml(200, '...', false)}}