How to truncate the text or HTML content that is too long in the template and add an ellipsis to keep the page tidy?

It is crucial to maintain the neat and consistent layout of page content in website operation.Especially when it comes to displaying abstracts, product descriptions, or news headlines, the length of the original content is often inconsistent, which can easily lead to page layout errors and affect the user's reading experience.AnQiCMS provides very practical template filters that can help us easily truncate long texts or HTML content, and automatically add ellipses to keep the page elegant.

Understanding the importance of text truncation

Imagine a list of articles where some abstracts are very short and others are several hundred words long.If these summaries are not processed uniformly, the short summary area may appear hollow, and the long summary may burst the layout, even causing content overflow.This not only makes the page look unprofessional, but also makes it difficult for users to quickly browse information.Therefore, whether the content is plain text or contains various style tags of HTML, we need an intelligent way to control its display length, and use an ellipsis to indicate that the user's content has not yet ended.

Text truncation tool in AnQiCMS

The AnQiCMS template system (similar to the Django template engine) is built-in with a variety of filters that can help us complete this task. ForPlain text contenttruncation, we usually usetruncatecharsandtruncatewordsThese two filters.

• truncatechars: This filter will sort according tocharacterThe number of characters to truncate the text. For example, if you want to display only the first 50 characters of a text and add an ellipsis at the end, you can use it like this:

  {{ item.Title|truncatechars:50 }}
  

  It will truncate the original content to the specified number of characters, including the ellipsis. If the length of the original content is less than or equal to the specified number of characters, no ellipsis will be added, nor will it be truncated.

• truncatewordsIf you prefer to truncate text bywordsnumber (this is more common in English text),truncatewordsThe filter would be a better choice. It would try to truncate at the word boundaries to avoid splitting words abruptly.

  {{ item.Description|truncatewords:15 }}
  

  This code will truncate the description to the first 15 words and similarly handle the ellipsis.

Process content that contains HTML.

When the content to be truncated itself contains HTML tags (such as bold, italic, links, etc.), use it directlytruncatecharsortruncatewordsIt may damage the HTML structure, causing the page to display abnormally, for example, with unclosed tags. AnQiCMS fully considers this point and provides a special filter for processing HTML content:truncatechars_htmlandtruncatewords_html.

• truncatechars_htmlThis filter is withtruncatecharsSimilar, but it will intelligently identify and retain the integrity of HTML tags.Even if truncation occurs within the tag, it will try to close the tag correctly, ensuring that the output HTML is valid.

  {{ archive.Content|truncatechars_html:100|safe }}
  

  Here, we givearchive.Contentthetruncatechars_htmlFilter, truncate content to 100 characters (including an ellipsis), while maintaining the integrity of the HTML structure. Please note that after truncating the HTML content, to ensure that the browser correctly parses HTML rather than displaying it as plain text, we also need to use it immediately after.|safefilter.|safeTell the template engine that this content is safe and does not require HTML encoding.

• truncatewords_html: Similarly, if you need to truncate content containing HTML by word and want to preserve the integrity of the HTML structure, you should usetruncatewords_html.

  {{ product.RichDescription|truncatewords_html:30|safe }}
  

  This will truncate the rich text description of the product to 30 words and safely handle HTML tags.

Actual application scenarios and operation suggestions

In the AnQiCMS template files, these filters are usually associated witharchiveListorpageListThe content list tags are used in combination. For example, on an article list page, you may need to display the title and a brief summary of each article:

{% archiveList articles with type="page" limit="10" %}
    {% for item in articles %}
    <div class="article-item">
        <h3><a href="{{ item.Link }}">{{ item.Title|truncatechars:40 }}</a></h3>
        <div class="summary">
            {{ item.Description|truncatechars_html:80|safe }}
        </div>
        <a href="{{ item.Link }}" class="read-more">阅读更多</a>
    </div>
    {% empty %}
    <p>暂时没有文章发布。</p>
    {% endfor %}
{% endarchiveList %}

In this code block:

• item.TitleIt is usually plain text, we usetruncatechars:40Truncate the title.
• item.DescriptionIt may be rich text, to avoid destroying the internal HTML format, we chosetruncatechars_html:80, and added|safeTo ensure that HTML tags are rendered correctly.

By flexibly using these filters, we can accurately control the display length based on the specific design and content type of the page, effectively enhancing the visual cleanliness and user experience of the website.

Frequently Asked Questions (FAQ)

1. Ask: Can the ellipsis after truncation be customized? For example, can it be changed to “… [Read more]”?

   • Answer: AnQiCMS built-intruncateThe series filter currently uses an ellipsis "…" by default and cannot be modified directly through parameters. If you need more complex prompt text, you may need to combineifDetermine the length of the content, then manually truncate the string and concatenate a custom prompt.

2. Question: If my content is short and does not reach the truncation length, will the ellipsis still be displayed?

   • Answer: No.truncateSeries filters (including_htmlVersions are all designed not to truncate or add an ellipsis when the length of the original content is less than or equal to the specified truncation length.They are only added when the content is actually truncated.

3. Ask: When I usetruncatechars_htmlafter, will the attributes inside the HTML tags (such as the image'saltattributes) be affected?

   • Answer:truncatechars_htmlandtruncatewords_htmlThe filter is designed to preserve the integrity and attributes of HTML tags as much as possible.It mainly focuses on content truncation and the correct closure of tags, usually does not actively modify the attribute values inside the tags.If the truncation point happens to be in the middle of an attribute value, then that attribute value may be truncated, so you need to weigh the truncation length accordingly.