In website content operations, we often encounter situations where we need to truncate overly long texts to maintain the cleanliness and consistency of the page layout, such as in article lists or product summaries.If it is truncated in a simple and粗暴 way, it may not only result in incomplete meaning of text, but also may destroy the structure of text containing HTML tags, affecting the beauty and functionality of the page.

English CMS with its flexible template engine provides us with an elegant solution to this problem.Through the built-in text filter, we can easily control the display length of long texts and add ellipses at appropriate positions, thus optimizing the user interface without sacrificing the readability of the content.truncatecharsandtruncatewordsFilter, as well as their respective HTML-friendly versions.

truncatechars: Precisely truncate by character.

truncatecharsThe filter can truncate text according to the number of characters you specify. It counts from the beginning of the text and truncates at the character count you set, adding three ellipses automatically at the end....).

For example, if you have a text snippet: "Safe CMS is a powerful content management system." and you want to display only the first 10 characters, you can use it like this:

{{ "安企CMS是一个功能强大的内容管理系统。"|truncatechars:10 }}

This code's output will be: 'Anqi CMS is a function...'

It is worth noting that,truncatecharsWhen counting, the three ellipses added at the end are also counted in the total number of characters you set.This means that if you set truncation to 10 characters, the actual number of displayed content characters will be 7 characters plus 3 ellipses.

Considerations when text contains HTML tags:truncatechars_html

If your text content contains something like<b>（Bold）、<em>(italic) or<p>(Paragraph) such HTML tags, use directlytruncatecharsMay cause the HTML structure to be destroyed, for example, the tags are not properly closed, resulting in abnormal display of the page.

To avoid this situation, safe CMS providestruncatechars_htmlFilter. It can intelligently parse HTML structure, ensure that all opened tags are correctly closed during truncation, thus protecting the integrity of the page.

For example, a text with HTML tags: “<p><b>安企CMS</b>是一个功能强大的内容管理系统，致力于提供高效解决方案。</p>”, if you want to truncate the first 25 characters while maintaining the HTML structure, you can use it like this:

{{ "<p><b>安企CMS</b>是一个功能强大的内容管理系统，致力于提供高效解决方案。</p>"|truncatechars_html:25 }}

The output will be: “<p><b>安企CMS</b>是一个功能强大...</p>"

It can be seen that, even after truncation,<b>and<p>the tags are still closed correctly, avoiding page errors.

truncatewords: intelligent truncation by word

Withtruncatecharstruncated by characters differently,truncatewordsThe filter is truncated based on the number of words.This is particularly useful for English content, as it maintains the integrity of each word, avoiding the situation where a word is cut in half, making the truncated text more readable.

For example, if you have a piece of English text: “AnQiCMS is a powerful content management system.”, and you want it to display only the first 3 words, you can use it like this:

{{ "AnQiCMS is a powerful content management system."|truncatewords:3 }}

输出结果会是：“AnQiCMS is a…”

Withtruncatecharsdifferent,truncatewords在计数时，省略号不计入单词数量This means that if you set truncation to 3 words, 3 complete words are displayed, followed by an ellipsis.

Word truncation in HTML text:truncatewords_html

Similarly, when HTML content needs to be truncated by word,truncatewords_htmlThe filter provides with,truncatechars_htmlSimilar security processing mechanism. It will identify and close HTML tags in the text, and truncate it by word count.

For example, a text segment containing HTML tags in English: <p><b>AnQiCMS</b> is a powerful content management system.</p>If you want to truncate the first 5 words while maintaining the HTML structure:

{{ "<p><b>AnQiCMS</b> is a powerful content management system.</p>"|truncatewords_html:5 }}

The output will be: "<p><b>AnQiCMS</b> is a powerful content ...</p>"

Here, HTML tags are handled properly, and the text is also truncated by word count.

When and how to use these filters?

Choose which filter to use, mainly depending on your specific needs and content characteristics.

  • When it is necessary to strictly control the physical width of the display area:truncatecharsortruncatechars_html通常是更好的选择，因为它按字符而非单词计数，能确保更一致的视觉长度。This is particularly important on multilingual websites because there is a large difference in the length of words in different languages.
  • When it is desired to maintain the semantic integrity of the text:truncatewordsortruncatewords_htmlMore suitable, especially when dealing with English content, it can avoid broken words and make the text more natural.
  • When dealing with scenarios such as article abstracts, product descriptions, and comment previews.These filters can all be used. They help you display core information within limited space and guide users to click for more details.
  • The most important point:If your content may contain any HTML tags(for example, bold, italic, links, and other formats), pleasealways use the version with_htmlsuffix[for example]truncatechars_htmlortruncatewords_html）。This ensures that during truncation, HTML tags can be closed correctly, avoiding layout chaos or functional anomalies. Even if you are not sure if the content contains HTML, use_htmlVersion is also a safe **practice**.

In short,truncatecharsandtruncatewordsThe HTML-friendly version, which is a powerful tool for content operation of the security CMS.They can help you easily achieve fine-grained control over content display, enhancing the overall user experience and professionalism of the website.

Common Questions and Answers (FAQ)

  1. Question: Is the ellipsis “…” after truncation counted in the set length?Answer: It depends on the filter type you are using. Fortruncatecharsandtruncatechars_htmlYes, ellipsis