How to automatically wrap long text to a specified length in AnQiCMS template?

In the presentation of website content, the display method of long text is often a key factor affecting user experience and page aesthetics.When we need to display a long text content, such as an article summary, product description, or detailed introduction, in a more readable and layout-adaptive way, AnQiCMS' template function provides a powerful and flexible solution.

AnQiCMS uses a syntax similar to Django's template engine, with built-in filters (Filters) that can help us easily implement text formatting, including how to automatically wrap long text to a specified length.

AnQiCMS's solution:wordwrapFilter

In order to implement automatic line wrapping for long text in the AnQiCMS template, we can utilizewordwrapFilter. This filter can insert line breaks between words in text based on the specified character length, (\nThis allows for 'soft wrapping' of text. This means it does not force a word to be cut off, but rather wraps at word boundaries to ensure the natural flow of text.

wordwrapBasic usage of filters:

wordwrapThe filter accepts a numeric parameter indicating the maximum number of characters per line. For example, if you want to display a maximum of 20 characters per line, you can use it like this:

{% set longText %}{% lorem 50 w %}{% endset %} {# 使用lorem标签生成一段长文本作为示例 #}

<h3>原始文本：</h3>
<p>{{ longText }}</p>

<h3>指定20个字符换行后：</h3>
<pre>{{ longText|wordwrap:20 }}</pre>

In the above example,{% lorem 50 w %}Used to generate a random Latin text containing 50 words for demonstration purposes.longText|wordwrap:20This indicates that the text will be wrapped at a maximum of 20 characters per line. To make the wrapping effect more intuitive, we placed the processed text inside the<pre>tags becausepreThe label will retain the original line breaks and spaces in the text.

Why choosewordwrap?

wordwrapThe advantage of the filter is that it can maintain the semantic integrity of the text.It looks for spaces between words as line breaks, which avoids splitting a word in the middle and is crucial for improving readability.For example, when displaying a list of product features, if each feature description is too long, usewordwrapThey can be elegantly folded without breaking the word structure to fit the width of the list items.

Deep understandingwordwrapPrinciples and注意事项

wordwrapThe filter mainly relies on spaces in the text to determine the line break points. This means that if there is a long string of continuous characters without any spaces in your text (for example, in Chinese, Japanese, Korean, etc., languages that do not have natural word separators),wordwrapIt will not be possible to break lines within this long string. In this case, the browser may treat it as an indivisible 'word' and may cause text overflow within the container.

Therefore, when usingwordwrapWhen, especially when dealing with CJK (Chinese, Japanese, Korean) text, please note its characteristics. For scenarios that require forced line breaks at any character position, it may be necessary to combine with front-end CSS styles (such asword-break: break-all;oroverflow-wrap: break-word;Ensure compatibility in extreme layout situations.

Related but different text processing methods.

exceptwordwrapIn addition to "auto-wrap", AnQiCMS also provides other practical text processing filters, which are different in function although they are related to text length.

1. truncatecharsandtruncatewordsText truncated and ellipsis addedIf you need to shorten long text to a specified length and add an ellipsis at the end (...ThentruncatecharsTruncated by character count andtruncatewords(Truncated by word count) is a more suitable choice. They are often used to display article summaries, ensuring that the content does not occupy too much space.

   • Example (truncatechars):

     {% set articleSummary = "这是一篇很长的文章摘要，我们希望它能够在一个固定长度内显示，并且在末尾加上省略号以示内容未完。" %}
     <p>{{ articleSummary|truncatechars:20 }}</p> {# 输出："这是一篇很长的文章摘..." #}
     

   • Example (truncatewords):

     {% set articleSummaryEn = "This is a very long article summary that we want to display within a fixed length with ellipses." %}
     <p>{{ articleSummaryEn|truncatewords:8 }}</p> {# 输出："This is a very long article summary that..." #}
     

2. linebreaksandlinebreaksbr: Handle existing newline charactersThese filters are used to convert existing line breaks in text (\n) to HTML tags or using<br/>}<p>Label wrapping. They do not automatically insert line breaks based on length, but rather process the line breaks explicitly present in the source text. This is very useful for displaying user input text with segments.

   • Example (linebreaksbr):

     
     {% set userContent = "用户输入的第一段内容。\n这是第二段内容，中间有换行符。" %}
     <p>{{ userContent|linebreaksbr|safe }}</p> {# 将\n转换为<br/> #}
     

Examples of actual application scenarios

• Summary display on the article list page:You can usetruncatecharsortruncatewordsTo control the length of the summary, keep the page tidy.
• Key parameters on the product details page:If the value of a product parameter is too long, consider usingwordwrapBreak at the appropriate position to fit the layout and avoid overflow.
• Descriptive text in the sidebar or widget:These areas have limited space,wordwraportruncatecharsHelp you elegantly display information.

Mastering these text processing filters will give you greater control over content presentation in the AnQiCMS template, thereby creating websites that are more attractive and align with user expectations. By using them flexiblywordwrap/truncatecharsFilters like this, you can ensure that the website provides a **reading experience** on different devices and layouts.

Frequently Asked Questions (FAQ)

Q1: WhywordwrapDoes the filter not work on Chinese text?A1: wordwrapThe filter mainly inserts line breaks by identifying spaces in the text