In website operation, we often encounter situations where we need to display long text content within limited layout space.If not processed, these texts may cause page layout to be chaotic, affecting the user's reading experience.AnQiCMS (AnQiCMS) provides flexible template functions and rich filters, which help us easily solve this problem.This article will discuss in detail how to automatically wrap long text content to a specified length in the AnQi CMS template, and introduce the method of truncating related content.

Understanding the requirements for long text processing

Imagine a list page of articles, where if the introduction of each article is too long, it will occupy the position of other elements and even go beyond the container boundary.Or on the product details page, the description of a product parameter is very detailed, but also hope that it can be displayed neatly.At this point, automatic line break or truncation display is particularly important.The template engine of Anqi CMS supports syntax similar to Django, allowing us to conveniently format and process text content through powerful filters.

Core Strategy: UtilizewordwrapFilter implementation for automatic line breaks

The main tool for automatic line break in long text in the AnQi CMS template iswordwrapFilter. This filter can automatically insert line breaks into a long text content according to the specified character length, thus achieving a neat arrangement of content visually.

wordwrapThe working principle of the filter

wordwrapThe core function of the filter is to insert line breaks at appropriate blank spaces in the text content according to the given number of characters.It will prioritize line breaks based on words (separated by spaces).For example, if you set a line break every 50 characters, the filter will attempt to break at a word boundary near the 50th character to maintain the integrity of the word.

It should be noted that if there are consecutive Chinese characters in the text without spaces between them,wordwrapThe filter will not force a line break in the middle of these consecutive Chinese characters. This is because the filter defaults to using spaces as word separators.

How to usewordwrapFilter

wordwrapThe basic usage syntax of the filter is very intuitive:

{{ 你的文本变量 | wordwrap: 指定长度 }}

Among them,你的文本变量Is the long text content you want to process,指定长度is an integer indicating the number of characters you want to display per line.

In the Auto CMS, long text content usually comes from document details (English)archive.Content), category description (category.Content) or single-page content (page.Content）等字段。Assuming you want to display a summary part of the article content in a sidebar on the article detail page, and you want it to automatically wrap every about 40 characters, you can do it like this:

Firstly,archiveDetailLabel fetching article content:

{% archiveDetail articleContent with name="Content" %}

Then, thearticleContentApplywordwrapa filter, and to ensure that HTML tags are parsed correctly (if the content contains HTML), plussafeFilter:

<div style="width: 300px; border: 1px solid #ccc; padding: 10px;">
    <h4>文章摘要</h4>
    <p>{{ articleContent | wordwrap: 40 | safe }}</p>
</div>

this code will try to convertarticleContentThe text should be wrapped at about every 40 characters, and the processed content should be safely output to the page.

Auxiliary strategy: utilizingtruncatecharsandtruncatewordsFilter to extract content

Besides automatic line breaks, sometimes we prefer to directly cut the content and add an ellipsis at the end, which is particularly common when displaying list descriptions. Anqi CMS providestruncatecharsandtruncatewordsFilter to meet this requirement.

truncatecharsandtruncatewordsdifferences

  • truncatechars: Truncated based on the number of characters. For example,{{ content | truncatechars: 100 }}The content will be truncated to 100 characters (including an ellipsis), regardless of how many words are contained within these 100 characters.
  • truncatewords: Truncated based on the number of words. For example,{{ content | truncatewords: 20 }}It will truncate the first 20 words and add an ellipsis at the end.

If your content may contain HTML tags and you wish to retain the integrity of these tags when extracting, to prevent the HTML structure from being destroyed, you can use their HTML versions:truncatechars_htmlandtruncatewords_html.

How to use the slicing filter

Suppose you need to display the first 150 characters of each article as a summary on the article list page:

{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
        <div class="article-item">
            <h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
            <p>{{ item.Description | truncatechars: 150 | safe }}</p>
            {# 如果 item.Description 可能含有HTML，建议使用： #}
            {# <p>{{ item.Description | truncatechars_html: 150 | safe }}</p> #}
            <a href="{{ item.Link }}">阅读更多 &raquo;</a>
        </div>
    {% empty %}
        <p>暂无文章。</p>
    {% endfor %}
{% endarchiveList %}

Here,item.DescriptionVariables aretruncatechars: 150The filter is processed to ensure that the summary does not exceed the maximum length.|safeSimilarly, it is for the safe output of HTML content.

Choose the appropriate text processing method

  • When to usewordwrap?When you want the long text to be visually neat, but also need to display the full text content.It modifies the content by inserting actual newline characters, suitable for displaying detailed descriptions or code blocks within fixed-width containers.
  • When to usetruncatecharsortruncatewords?When you need to display a brief preview or summary of text within a limited space, and wish to explicitly control the length of the text, and also prompt the user that the content is not fully displayed at the end.This is very practical in list page and card layout.
  • When processing HTML content:If the text content contains HTML tags and you use the cut filter, be sure to usetruncatechars_htmlortruncatewords_htmlto avoid damage to the HTML structure.wordwrapThe filter itself does not destroy the HTML structure, but if you expect to insert<br/>To implement visual line break, while there are other block-level HTML elements already present in the content, it may lead to a display effect that is not as expected.

By flexibly using these text processing filters provided by the security CMS templates, we can effectively manage and optimize the display of long text content, thus enhancing the overall aesthetics and user experience of the website.

Common Questions (FAQ)

1.wordwrapDoes the filter work for Chinese content? What if I want Chinese text to be wrapped at a specified word count?

wordwrapThe filter defaults to using spaces as word delimiters, so it will not force line breaks in the middle of continuous Chinese characters without space separation.If you need to break lines in Chinese text strictly by word count (even in the middle of Chinese characters), the built-in filter of Anqi CMS cannot directly achieve this.In this case, you may need to consider customizing template functions or further processing through frontend JavaScript.

2. Can I use them simultaneously?wordwrapandtruncatecharsFilter?

OK, you can use them together. For example, you can use it first totruncatecharstruncate the text length, and then use it.wordwrapTransform the extracted text to a new line to meet specific layout requirements. The order of processing is important, usually extracting first and then formatting to a new line. For example:{{ 你的文本变量 | truncatechars: 200 | wordwrap: 50 | safe }}.

**3.wordwrap