In the increasingly fragmented information consumption era, the way website content is presented directly affects user experience.Whether it is the abstract of the article list, the preview of the product introduction, or the cards of various information streams, we need to convey the core information within a limited space while maintaining the page's neatness and the uniformity of the layout.This leads to the need for text truncation.AnQiCMS as a fully-featured content management system, is well-versed in this, providing us with a powerful text truncation filter, especially its intelligent handling of HTML content, making content operation more relaxed.

The foundation of text truncation:truncatecharsWithtruncatewords

AnQiCMS template engine provides two basic text truncation methods:truncatecharsandtruncatewordsThey are each suitable for different scenarios, understanding their differences is the first step in efficient content operation.

  • truncatecharsFilter: Precisely truncate by characterAs the name suggests,truncatecharsThe filter is based on the specifiednumber of charactersTruncate text. No matter the content is in English, Chinese or other languages, it will accurately cut the text to the character length you set and automatically add an ellipsis to the part that exceeds....）。For example, if you have a very long title that needs to be displayed within a fixed number of characters, thentruncatecharsis the ideal choice.

    Example:Suppose there is text"欢迎使用安企CMS，这是一个强大的内容管理系统！"If you use{{ 文本 | truncatechars:10 }}The output will be"欢迎使用安企CM..."The ellipsis is also counted in the total length.

  • truncatewordsFilter: Truncate by single word semanticswhiletruncatewordsThe filter then changed the truncated unit from a single character to a "word".It will truncate based on the number of words in the text and add an ellipsis when it exceeds the specified number of words.This approach places more emphasis on the readability and semantic integrity of text, especially suitable for English content, as it avoids truncating in the middle of a word.For Chinese and other non-space-separated languages, it processes according to internal logic or directly by character (in AnQiCMS, it tends to recognize continuous non-space character blocks as 'words').

    Example:Suppose there is text"AnQiCMS is a powerful content management system for enterprises."If you use{{ 文本 | truncatewords:5 }}The output will be"AnQiCMS is a powerful content...".

Challenge and Solution: Intelligent truncation of HTML content

In actual website content, we rarely deal with plain text. Article summaries, product descriptions often contain<strong>/<em>/<p>/<a>HTML tags, even images<img>tags. If we simply usetruncatecharsortruncatewordsTruncating content containing HTML can lead to issues such as unclosed tags, chaotic page layout, and even JavaScript errors.

AnQiCMS fully considers this pain point and providestruncatechars_htmlandtruncatewords_htmlthese two advanced filters.

  • truncatechars_htmlandtruncatewords_htmlof the smartnessthese two with_htmlSuffix filter, the core intelligent part of which is that, while performing truncation operations,they intelligently parse and handle HTML tagsThis means:

    1. Maintain HTML structure integrity:The filter will recognize HTML tags in the content.Even if the truncation point falls in the middle of a tag, it ensures that all open tags are correctly closed at the truncation point, thus avoiding damage to the page structure.
    2. Avoid destroying media content:For<img>or<video>Tags that are self-closing or paired, the filter will not truncate within the tag but will do so before or after it, to ensure the complete display or correct reference of media content.
    3. Automatically add ellipsis:Like the basic filter, ellipses are automatically added when the content exceeds the specified length.

    Example:Suppose there is HTML content:"<p><strong>这是</strong>一段<em>很长的</em>测试文本，其中包含了一些HTML标签和<a href='#'>链接</a>，我们希望它在截断后依然保持美观。</p>"

    If you use{{ HTML内容 | truncatechars_html:20 }}The output might be:"<p><strong>这是</strong>一段<em>很长的</em>测试文本...</p>"Please note that the actual output length may vary slightly due to the number of characters in the label, but the key point is<strong>/<em>/<p>All tags are properly closed, and the link may be truncated or preserved, depending on the truncation point and internal logic.)

    If you use{{ HTML内容 | truncatewords_html:5 }}The output may be:"<p><strong>这是</strong>一段<em>很长的</em>测试...</p>"Similarly, the HTML structure is preserved.

How to choose an appropriate filter?

Choosing the correct filter depends on your specific needs:

  1. If the content is plain text (or you do not care about the HTML structure):

    • Need to strictly control the number of characters(For example, fixed-size text boxes): Selecttruncatechars.
    • Need to truncate by semantic units, with more emphasis on readability(For example, English article abstract): Selecttruncatewords.

  2. If the content may contain HTML tags:

    • In any case, it should be prioritizedtruncatechars_htmlortruncatewords_html.This is the key to ensuring that your website remains aesthetically pleasing and functional after content truncation.
    • If neededAccurate to character count: Usetruncatechars_html.
    • If neededAccurate to word count: Usetruncatewords_html.

With these flexible and intelligent text truncation filters provided by AnQiCMS, you do not need to manually clean HTML tags or worry about rendering issues after truncation.They work silently behind the scenes, ensuring that your website presents itself in a neat, professional, and error-free manner to visitors in any scenario, greatly enhancing the efficiency of content operations and the user experience of the website.

Common Questions (FAQ)

Q1: If the truncation length I set is longer than the actual length of the original text, how will the filter handle it? Will it still add an ellipsis?

A1:Will not.If the number of characters (or words, depending on the filter you use) in the original text does not exceed the truncation length you set, the filter will not perform any truncation and will not add an ellipsis at the end of the text.It will directly output the original complete text.

Q2:_htmlCan the filter handle deeply nested HTML structures or HTML content with some formatting errors?

A2: _htmlThe filter is designed to handle complex HTML structures, including nested tags, and will do its best to keep them correctly closed.For some minor format errors, it can usually fix and truncate.However, if the HTML content itself has serious and unfixable structural issues, or if the tag nesting level is exceptionally deep, unexpected results may still occur.When publishing content on the content management backend, it is recommended to use a rich text editor to ensure the standardization of HTML format.

Q3: Truncated length (numberDoes the parameter contain the length of the final ellipsis?

A3:Yes, intruncatecharsandtruncatechars_htmlthe filter you specifiednumberthe length represented by the parameter isincludingthe final ellipsis added...This means that if set to10The total length of the truncated text plus the ellipsis will be approximately 10 characters (one Chinese character counts as one character, and the ellipsis takes up three characters).