How to truncate long text content in a template and add an ellipsis for display?

In website content operation, we often encounter scenarios where it is necessary to display long text, such as article summaries, product descriptions, or user comments.If the complete content is displayed directly, it may cause the page to be long and disorganized, affecting the user's reading experience.At this time, the long text is intelligently truncated and an ellipsis (...) is added at the end, which becomes an elegant and practical solution.AnQi CMS is a powerful content management system that provides various convenient ways to meet this need with its flexible template engine.

The core tool for efficiently truncating long text content: Template Filter

The Anqi CMS template system follows the design philosophy of Django, using 'filters' to process variables and achieve various content formatting.For text truncation, the system has several very practical filters that allow us to easily control the display length of text.

1. Cut according to the number of characters:truncatechars

The most commonly used and most direct way to cut text istruncatecharsA filter that truncates text to a specified character count and automatically adds an ellipsis to the excess. It is important to note that this character count includes the ellipsis itself.

For example, if you want to display an 80-character summary of each article on the article list page, you can use it like this:

{{ item.Description|truncatechars:80 }}

Hereitem.DescriptionThis is the long text content you want to extract,80Then it is the maximum number of characters you want to display. If the original description exceeds 80 characters, it will be truncated at the 77th character and three dots will be added to form an ellipsis.If the original text is less than 80 characters, it will be displayed in full without an ellipsis.This filter is suitable for precise length control of plain text content.

2. Extract by word count:truncatewords

If your content places more emphasis on the integrity of words rather than the mere length of characters,truncatewordsThe filter would be a better choice. It would truncate based on the number of words, ensuring that each displayed word is complete, thereby improving the readability.

The method of use andtruncatecharsSimilar, the numbers at the end represent the number of words:

{{ item.Description|truncatewords:20 }}

This filter is especially convenient for processing English content, as it avoids the issue of half words caused by character truncation, maintaining clear semantics.In multilingual websites, it can provide a more friendly truncation effect for languages separated by spaces.

3. Smart handling of HTML content extraction:truncatechars_htmlandtruncatewords_html

Sometimes, the text content we extract may contain HTML tags, such as bold, italic, or links. Use them directly.truncatecharsortruncatewordsMay destroy these HTML structures, causing abnormal page display, such as unclosed tags or style chaos. Anqi CMS providestruncatechars_htmlandtruncatewords_htmlthese special filters.

The magic of it lies in the fact that, while extracting text, it intelligently retains and closes all unclosed HTML tags, ensuring that the output HTML code is still valid and structurally complete. This is crucial for handling rich text editor-generated content (such as theContentField)，and it is very important when displayed on the list page or in the summary area.

The usage is the same as the previous two, but it should be noted that since the output is HTML content, it usually needs to be配合|safeFilter used to prevent the template engine from automatically escaping HTML tags:

{{ item.Content|truncatechars_html:150|safe }}

Or

{{ item.Content|truncatewords_html:50|safe }}

By_htmlFilter, you can safely extract rich text content without worrying about破坏 the page layout and functionality.

How to choose the appropriate cutting method?

In practical applications, the choice of filter depends on your specific needs and content characteristics:

• For pure text titles and short sentences, aiming for fixed length, and not concerning the integrity of words, usingtruncatecharsFor example, the title summary of the news list.
• For an English abstract, pursue the completeness of words, ensure clarity of meaning, usingtruncatewordsFor example, the brief introduction of a blog article.
• For rich text content containing HTML tags (such as the beginning part of an article body)To avoid destroying the page structure, please be sure to usetruncatechars_htmlortruncatewords_htmland combining|safeFilter output.

Practical suggestions and **practice

These extraction methods are widely used in the template design of Anqi CMS.You can flexibly use it in areas such as the article list page, product display page, category page, etc. where a brief preview of the content is required.It is recommended to set different truncation lengths when designing, based on different display areas and device types (such as PC or mobile end), to achieve **user experience.For example, you may wish to truncate the number of characters (such as 40) on the mobile list page, while allowing more leeway (such as 100) on the PC end.Maintain consistent truncation length, which can also make the page look cleaner.

Bytruncatechars/truncatewordsAnd its HTML version filter, Anqi CMS provides powerful text processing capabilities for website operators, making the display of long text content both beautiful and practical.Reasonably utilizing these features will greatly enhance the user experience and content presentation quality of your website.

Frequently Asked Questions (FAQ)

Q1:truncatecharsandtruncatewordsDoes the truncation length include an ellipsis?A: Yes,truncatecharsWhen calculating the truncation length,Is includedthree ellipses (…) are automatically added at the end. For example, if you set the truncation