In AnQi CMS, as an experienced website operator, we are well aware of how to improve user experience through precise content display.In many content management scenarios, the control of the text length of article summaries, product descriptions, or list page previews is a key factor in ensuring the page is neat and beautiful, and information is efficiently conveyed.To avoid long text affecting the layout while maintaining the continuity of content, it is a very practical skill in AnQiCMS template development to truncate strings to a specified length or word count and automatically add an ellipsis at the end.

AnQiCMS's template engine provides powerful filter functions, which can conveniently format and process output variables. For the need of string truncation, we mainly usetruncatecharsandtruncatewordsThese two filters.

Truncate string by character length and add an ellipsis

When we want to limit the display of a text content to a fixed number of characters, we can usetruncatecharsThe filter will truncate the string according to the number of characters you specify. If the length of the original string exceeds the specified number, it will automatically add an ellipsis (...) at the end of the truncation, clearly indicating that the content has been omitted.

For example, you need to display the introduction of each article on the article list page, but in order to maintain the unity of the page layout, it is hoped that the introduction will be displayed for a maximum of one hundred characters. At this point, you can apply it in the template like thistruncatecharsFilter:

{{ item.Description|truncatechars:100 }}

In this example,item.DescriptionRepresented the introduction of the article. Through|truncatechars:100，AnQiCMS will automatically truncate the introduction to a maximum of one hundred characters and intelligently add an ellipsis at the end. If the introduction itself is less than one hundred characters, it will be displayed in full without adding an ellipsis.

String is truncated by word count and an ellipsis is added

Different from character truncation, sometimes we prefer to control the length of text by word count, which is especially common in English or other languages based on words, as it can better maintain the integrity of semantics.truncatewordsThe filter is designed for this purpose. It calculates the number of words in a string and truncates according to the number you specify, and also automatically adds an ellipsis at the end.

If you have a product description field and you want to display a short description containing twenty words on the product list page, you can use it like this in the template.truncatewords:

{{ product.Description|truncatewords:20 }}

Hereproduct.DescriptionRepresents product description.|truncatewords:20Ensure that the description content is no more than twenty words and add an ellipsis when necessary.

Handle content that includes HTML tags.

In the operation of actual websites, many content fields (such as article text, rich text editor-generated summaries) may contain HTML tags. If used directly,truncatecharsortruncatewordsTo truncate this type of content may damage the HTML structure, causing the page to display abnormally. To solve this problem, AnQiCMS also provides an optimized filter for HTML content:truncatechars_htmlandtruncatewords_html.

These filters intelligently parse the HTML structure when extracting HTML strings, ensuring that all open HTML tags are properly closed while truncating text, thus avoiding page chaos caused by unclosed tags. When outputting such extracted content, it is usually necessary to use in conjunction with|safefilter.

For example, to extract a segment of a paragraph containing HTML and limit it to two hundred characters while maintaining the HTML structure: 

{{ archive.Content|truncatechars_html:200|safe }}

Similarly, if you want to truncate HTML content by word count:

{{ archive.Content|truncatewords_html:30|safe }}

By these filters, you can flexibly control the display length of AnQiCMS website content, whether it is plain text or rich HTML content, it can be presented to the user in an elegant and structurally complete way, thus optimizing the visual effects of the page and the user reading experience.When engaging in content operation and template design, it is beneficial to use these string truncation functions, which will greatly enhance the professionalism and attractiveness of your website content.

Frequently Asked Questions

Ask: Will an ellipsis be displayed if my text content is shorter than the set truncation length? Answer: No. These extraction filters of AnQiCMS are very smart.If the length of the original content (whether in characters or words) does not exceed the limit you set, the filter will output the text as is and will not add an ellipsis at the end.An ellipsis will only appear when the content is actually truncated to indicate to the reader that the content is incomplete.

Ask: Can I use multiple filters consecutively on the same template variable? Answer: Yes, AnQiCMS template engine supports chained filter calls.You can pass multiple filters through|Symbols are connected together, they will process the variables in order from left to right. For example, you may want to convert the text to lowercase before truncating it:{{ item.Title|lower|truncatechars:50 }}.

Question:truncatechars_htmlandtruncatewords_htmlCan the filter handle all complex HTML structures? For example, nested ones?div/scriptTags, etc.? Answer:_htmlThe series filter aims to maintain the integrity of the HTML structure as much as possible, especially good at handling common text format tags (such as<b>/<i>/<a>/<p>However, for very complex or HTML structures containing embedded scripts, although they strive to close tags to prevent rendering errors on the page, overly complex HTML content may still cause slight differences in display when forced to be truncated.Therefore, for content that includes complex interactions or scripts, it is recommended to preprocess it or consider not extracting it before, to ensure that the function is not affected.