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 chaos and affect the user's reading experience.AnQiCMS (AnQiCMS) provides flexible template functions and rich filters to help us easily solve this problem.This article will discuss in detail how to display long text content with automatic line breaks at specified lengths in the Anqi CMS template, and introduce the methods for truncating related content.

Understanding the need for long text processing

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

Core strategy: utilizingwordwrapThe filter implements automatic line wrapping

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

wordwrapThe principle of the filter.

wordwrapThe core function of the filter is to insert line breaks at appropriate blank spaces in the text content based on the given number length.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 try to break at the word boundary near the 50th character to maintain the integrity of the word.

It should be noted that if the text contains consecutive Chinese characters without spaces between them,wordwrapThe filter will not force line breaks 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 you want to process,指定长度It is an integer representing how many characters you want to display per line after.

In AnQi CMS, long text content usually comes from document details (archive.Content), category description (category.Content) or single page content (page.Content）Fields. Suppose you want to display a summary part of the article content in a sidebar on the article detail page, and you want it to wrap automatically every 40 characters or so, you can do it like this:

First, througharchiveDetailTag to retrieve article content:

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

Then, toarticleContentapplywordwrapFilter, and to ensure that HTML tags are parsed correctly (if the content contains HTML), add:safeFilter:

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

This code will try to convert:articleContentThe text should be wrapped every 40 characters or so and the processed content should be output safely to the page.

Auxiliary strategy: utilizetruncatecharsandtruncatewordsFilter to extract content

In addition to automatic line breaks, sometimes we would like to directly extract the content and add an ellipsis at the end, which is particularly common when displaying list introductions. Anqi CMS providestruncatecharsandtruncatewordsFilter to meet this requirement.

truncatecharsandtruncatewordsDifference

  • truncatechars: Truncate 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 during extraction, preventing the destruction of the HTML structure, you can use their HTML versions:truncatechars_htmlandtruncatewords_html.

How to use the truncate filter

Assuming 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.DescriptionThe variable istruncatechars: 150The filter processes, ensuring the summary will not be too long.|safeIt is also for safely outputting HTML content.

Choose the appropriate text processing method

  • When to usewordwrap?When you want the long text to be visually tidy but also need to display the full text content.It modifies the content by inserting actual line breaks, which is 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 in a limited space, and want to clearly control the length of the text, while also prompting the user that the content is not fully displayed.This is very practical in list pages and card layouts.
  • When processing HTML content:If the text content contains HTML tags and you are using a truncation filter, please make sure to usetruncatechars_htmlortruncatewords_htmlto avoid damaging the HTML structure.wordwrapThe filter itself does not destroy the HTML structure, but if you expect to insert by<br/>To implement visual line breaks, while there are already other block-level HTML elements in the content, it may lead to unexpected display effects.

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

Frequently Asked Questions (FAQ)

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

wordwrapThe filter defaults to using spaces as word separators, so it will not force line breaks in the middle of continuous Chinese characters without spaces.If you need to strictly break lines in Chinese text 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 custom template functions or further processing through front-end JavaScript.

2. Can I use them simultaneously?wordwrapandtruncatecharsFilter?

Can, you can use them together. For example, you can use it first totruncatecharscut the text length, and then use it againwordwrapTo format the extracted text with line breaks to fit specific layout requirements. The order of processing is important, usually extract first and then format. For example:{{ 你的文本变量 | truncatechars: 200 | wordwrap: 50 | safe }}.

**3.wordwrap