How to truncate long text and display an ellipsis?

In web content presentation, we often need to refine some long text content, such as displaying abstracts on article list pages or brief descriptions on product cards.If the entire content is displayed directly, it may not only destroy the neatness of the page layout, but may also affect the efficiency of users quickly browsing information.Therefore, truncating overly long text and appending an ellipsis at the end has become a common strategy to enhance user experience.Auto CMS as an efficient content management system, comes with 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, among which the core tool used for truncating text and displaying an ellipsis istruncatecharsandtruncatewords.

truncatecharsThe filter, as the name suggests, truncates characters based on their count.It starts counting from the beginning of the text, up to the number of characters you specify, and automatically adds an ellipsis “…” at the truncation point.Whether Chinese, English, numbers or various symbols, they are all regarded as a character unit.This filter is particularly useful when you need to precisely control the text display length, such as when maintaining consistent content block height in a card layout.

whiletruncatewordsFilter is truncated by word units.It will identify words in the text and count them, truncating at the number of words you set and also appending an ellipsis at the end.This method is more friendly to 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 deal with is not always pure 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 very likely that these HTML tags will be truncated incompletely, leading to page rendering errors or style chaos.

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 avoids damaging the page structure.|safefilters. 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 the Anqi CMS website. For example, on article or news list pages, we can usearchive.Description|truncatechars:120To display the summary of each article, it is both attractive to users to click and can maintain the uniformity of the list.In the product display area, shortening the brief description of product details can effectively highlight the selling points without occupying too much space.Additionally, for the introduction of categories or tags, or even overly long page titles, appropriate truncation can be applied according to actual design requirements.

When choosing the appropriate truncation method, it is recommended to decide based on the characteristics of your content and design objectives. If you have precise requirements for the display width of the text or are handling Chinese content,truncatechars(or}truncatechars_htmlIt is usually a better choice, as it can control characters finely. If your content is mainly English and you want to maintain the integrity of words,truncatewords(or}truncatewords_html）will provide a better reading experience. Always remember, whenever the text content may contain HTML tags, it is preferable to use the filter with_htmlsuffix, and use|safeto ensure correct rendering.

Integrating these filters into the Aigle CMS template is very intuitive. You just need to add a pipe character after the variable you need to process.|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>

Through this method, Anqi CMS enables content operation personnel to flexibly control the presentation of the website's front-end content, effectively enhancing the visual appeal and user experience of the website without altering the original content.

Common Questions (FAQ)

1. 问：为什么我使用truncatechars_htmlWhat if the text is truncated but the ellipsis is not displayed at the end of the text?Answer:truncatechars_htmlandtruncatewords_htmlThe filter will automatically add an ellipsis after truncating the content.If the original content (the actual visible character count after parsing HTML tags) is less than or equal to the truncation length you set, the filter will not perform the actual truncation operation, and therefore will not display the ellipsis.An ellipsis will only appear when the content is actually shortened.

2. 问：I have truncated the text containing HTML tags, but the page displays the original HTML tag code instead of the rendered format. What is the reason for this?答：This is usually because the security CMS template engine, for security reasons, defaults to escaping all output content to prevent cross-site scripting (XSS) attacks. When you usetruncatechars_htmlortruncatewords_htmlThe output after the filter processes rich text is still considered by the system as potentially containing unchecked HTML, and is therefore escaped.