How to truncate long text and display an ellipsis?

In the presentation of website content, we often need to refine some long text, such as displaying summaries on article list pages or showing brief descriptions on product cards.If the entire content is displayed directly, it may not only destroy the neat layout of the page, but may also affect the efficiency of users quickly browsing information.Therefore, truncating long text and adding an ellipsis at the end has become a common strategy to enhance user experience.AnQi CMS is an efficient content management system, built-in flexible template filters, which can help us easily achieve this function.

The template engine of Anqi CMS provides a series of powerful text processing filters, the core tool for truncating text and displaying an ellipsis istruncatecharsandtruncatewords.

truncatecharsThe filter, as the name implies, truncates according to the number of characters.It starts counting from the beginning of the text, stops at the specified number of characters, and automatically adds an ellipsis (...) at the truncation point.Whether it is Chinese, English, numbers, or various symbols, they are all considered as a character unit.This filter is particularly useful when precise control of text display length is required, for example, to maintain consistent content block height in card layouts.

AndtruncatewordsThe filter truncates at word boundaries. It identifies words in the text and counts them, truncating at the number of words you set, and also appending an ellipsis at the end.This approach is more friendly for websites mainly in English content, as it can avoid unnatural truncation in the middle of words, thus better maintaining the readability and semantic integrity of the text.

However, the text content we often handle is not always purely text; it may contain various HTML tags, such as bold, italic, links, or paragraph formatting.If the above plain text truncation filter is used directly, it is likely to truncate the HTML tags incompletely, which may lead to rendering errors or style confusion on the page.

To properly handle the truncation of rich text content, Anqi CMS further providestruncatechars_htmlandtruncatewords_htmlThese advanced filters. They are HTML-aware truncation tools that can intelligently check and close any incomplete HTML tags while truncating text, ensuring that the output HTML fragment remains valid and does not disrupt the page structure.After using these HTML-aware filters, in order for the browser to correctly parse and render the HTML content within, rather than displaying it as plain text, we also need to use it immediately after the template output,|safea filter. For example, you can write it like this:{{ archive.Content|truncatechars_html:150|safe }}.

These text truncation techniques are widely used in the daily operation of Anqi CMS websites. For example, on article or news list pages, we can usearchive.Description|truncatechars:120To display the abstract of each article, it can attract users to click and maintain the uniformity of the list.In the product display area, truncate the brief description of product details to effectively highlight selling points without occupying too much space.In addition, even for the introduction of categories or tags, or excessively long page titles, they can be appropriately truncated according to actual design requirements.

When choosing an appropriate truncation method, it is recommended to decide based on the characteristics of your content and design goals. If you have precise requirements for the display width of text, or if you are handling Chinese content, thentruncatechars(ortruncatechars_html）It is usually a better choice because it can finely control characters. If your content is mainly English and you want to maintain the integrity of words, thentruncatewords(ortruncatewords_html）Will provide a better reading experience. Always remember that whenever text content may contain HTML tags, it should be given priority to use filters with_htmlsuffix, and cooperate|safeto ensure correct rendering.

Integrating these filters into the Anqi CMS template is very intuitive. You just need to use the pipe character after the variable to be processed|Connect the corresponding filter and parameters. For example, to display the summary of a document:

<p class="article-summary">{{ article.Description|truncatechars:150 }}</p>

{# 如果是带有HTML格式的内容，并且希望保留格式 #}
<div class="product-brief">{{ product.Content|truncatechars_html:200|safe }}</div>

{# 针对英文标题，按单词截断 #}
<h2>{{ news.Title|truncatewords:8 }}</h2>

In this way, Anqi CMS allows content operators to flexibly control the presentation of the website's front-end content, effectively enhancing the visual appeal and user experience without changing the original content.

Frequently Asked Questions (FAQ)

1. Why do I usetruncatechars_htmlTruncated rich text content, but the ellipsis is not displayed at the end?Answer:truncatechars_htmlandtruncatewords_htmlThe filter will automatically add an ellipsis after truncating the content. If your original content (the actual visible character count after parsing HTML tags) is less than or equal to the truncation length you set, then the filter will not perform the actual truncation operation, and therefore, the ellipsis will not be displayed.An ellipsis will only appear when the content is actually shortened.

2. What is the reason why the original HTML tag code is displayed on the page instead of the rendered format effect when I truncate the text containing HTML tags?Answer: This is usually because the security template engine of Anqi CMS, for security reasons, defaults to escaping all output content to prevent cross-site scripting (XSS) attacks. When you usetruncatechars_htmlortruncatewords_htmlThe filter processes rich text and the output is still considered by the system to potentially contain unchecked HTML, and is therefore escaped.