When operating a website, we often encounter situations where we need to display long content, but the page space is limited.For example, on the article list page, we usually only want to display the summary of the article; on the product detail card, we may only want to show a brief description.If the content is not processed, it may overflow the container, destroy the page layout, and affect the user experience.

Auto CMS understands the importance of content display and provides us with powerful template features. Among them,truncatechars/truncatewords_htmlFilters are a powerful tool to solve content truncation issues.They can help us elegantly control the display length of text or HTML content, and automatically add a beautiful ellipsis when the content is truncated, keeping the website interface tidy and professional.

Next, we will have a detailed understanding of these practical content truncation filters and their applications.

Truncation processing of plain text content:truncatecharsandtruncatewords

When we need to truncate is pure text content, without any HTML tags,truncatecharsandtruncatewordsit is our first choice.

Truncate by character:truncatechars

truncatecharsThe filter allows us to specify a character count, and the content will be truncated based on this character count. It should be noted that it will add an ellipsis at the truncation position....），and these three ellipses will also be counted in the total character count you set.

Example Usage:假设我们有一段文章简介：“Joel is a slug that likes to write about AnQiCMS.”，我们希望它显示不超过9个字符。

{{ "Joel is a slug"|truncatechars:9 }}

Show results: Joel i...

As you can see,Joel is aWith the ellipses included, it is exactly 9 characters.truncatecharsVery suitable for precise character length control of short plain text (such as titles, tags).

Truncate by word:truncatewords

If your content is in English or separated by spaces into words, and you prefer to truncate by word to avoid cutting off a word in the middle,truncatewordsWould be a better choice. It would search for the nearest word boundary for truncation, and it would also add ellipses at the end, which would also count towards the word count.

Example Usage:We have a long English description: "This is a long test which will be cutted after some words." We hope it displays no more than 5 words.

{{ "This is a long test which will be cutted after some words."|truncatewords:5 }}

Show results: This is a long test ...

This ensures the integrity of each word, which is more in line with the reading habits of natural language.

Truncation processing of HTML content:truncatechars_htmlandtruncatewords_html

Directly use:truncatecharsortruncatewordsWhen processing content containing HTML tags, there may be issues. For example, if the content in<div>is truncated inside the tag, but</div>If the label is not included, it will lead to a chaotic HTML structure on the page, disordered styles, and even abnormal function.

In order to solve this problem, the Aqicms CMS provides two special filters for handling HTML content:truncatechars_htmlandtruncatewords_htmlThey truncate content while intelligently closing all unclosed HTML tags to ensure the integrity of the page structure.

Truncate HTML by character:truncatechars_html

truncatechars_htmlAllow us to truncate HTML content by character count and ensure all HTML tags are properly closed. It will also add an ellipsis and count it in the character count.

Example Usage:We have a paragraph with HTML tags: “<p class='test' id='foo'>This is a long test which will be cutted after some chars.</p>”，we hope it displays no more than 25 characters.

{{ "<p class='test' id='foo'>This is a long test which will be cutted after some chars.</p>"|truncatechars_html:25 }}

Show results: <p class='test' id='foo'>This is a long test wh...</p>

You can see that even if the truncation position iswhich中间，过滤器也自动为我们闭合了<p>标签，保证了页面的HTML结构不会被破坏。

按单词截断 HTML：truncatewords_html

Similarly,truncatewords_htmlEnsure that the HTML content is truncated by words while maintaining the integrity of the tags. It will truncate at the nearest word boundary and properly close the tags.

Example Usage:We have some HTML content: <p>This is a long test which will be cutted after some words.</p>We hope it displays no more than 2 words.

{{ "<p>This is a long test which will be cutted after some words.</p>"|truncatewords_html:2 }}

Show results: <p>This is ...</p>

Through this filter, we can truncate HTML content while maintaining semantic integrity (by word) and ensuring structural safety.

Recommended for actual application

In AnQi CMS, these content truncation filters are very useful in many scenarios:

  • Article list/News list:You can use them when displaying article titles and summaries:truncatecharsortruncatewordsTo unify the length of the introduction, maintain the list neat.
  • Product/Service Display:If the product description contains rich HTML formatting, but needs to display an abstract in card or list view,truncatechars_htmlortruncatewords_htmlCan perform perfectly, maintaining the format while controlling the length.
  • User comment/post preview:These filters can also be used when displaying the summary of user comments on the backend or frontend.
  • Multiple site content synchronization:If you use the multi-site management feature of Anqi CMS, to synchronize content summaries between different sites, these filters can also help you ensure consistency in display.

When choosing which filter to use, the key is whether the content you are dealing with is plain text or contains HTML, and whether you prefer to control by characters precisely or by words to maintain semantic integrity.Regardless of the situation, it is recommended that you perform thorough testing before applying it to the production environment to ensure that the content displays as expected.

By flexibly utilizing these content truncation filters provided by the security CMS, we can not only enhance the visual aesthetics of the website but also optimize the user experience, allowing users to efficiently obtain core information within limited page space.

Common Questions (FAQ)

  1. Filtering number parameters (such astruncatechars:9of9) mean specifically?This number parameter refers to the maximum length of content you want to display. Fortruncatecharsandtruncatechars_html, it refers to the maximum number of characters; fortruncatewordsandtruncatewords_htmlIt refers to the maximum number of words. It is worth noting that if the content is truncated and an ellipsis is added (...), these three ellipses will also be counted in the total length you set.

  2. If I truncate the content but don't want to show an ellipsis?Built-in in AnQi CMStruncatechars/truncatewords/truncatechars_htmlandtruncatewords_htmlThe filter will automatically add an ellipsis by default when the content is truncated.Currently, these filters do not directly provide options to disable the display of ellipses.If you have special requirements, you may need to consider creating a custom filter to achieve this function, but this goes beyond the scope of this article.

  3. When handling content containing HTML tags, should I prioritize?truncatechars_htmlOrtruncatechars?When your content contains any HTML tags, it is strongly recommended that you usetruncatechars_htmlortruncatewords_html. This is because regulartruncatecharsortruncatewordsThe filter will only truncate in plain text mode, which may truncate content in the middle of tags, causing HTML structure damage and thus affecting page layout and display. And it has_htmlThe suffix filter will intelligently recognize and correctly close incomplete HTML tags to ensure the integrity of the page structure.