In website content presentation, the way long texts are displayed 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 manner, AnQiCMS's template feature provides a powerful and flexible solution.

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

AnQiCMS solution:wordwrapFilter

In order to implement automatic line breaks for long text in AnQiCMS templates, we can usewordwrapFilter. This filter can insert line breaks between words in text based on the specified character length,\nThis feature achieves 'soft line break', which means it does not force the truncation of the word itself but breaks at the word boundary to ensure the natural flow of text.

wordwrapFiltering basics:

wordwrapThe filter accepts a numeric parameter, representing 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:20Then it indicates that this text will be wrapped at most 20 characters per line. To make the wrapping effect more intuitive, we placed the processed text in the<pre>tags, becausepreLabels will preserve the original newline characters and spaces in the text.

Why choosewordwrap?

wordwrapThe advantage of the filter is that it can maintain the semantic integrity of the text.It will look for spaces between words as the point of line break, which avoids cutting a word in the middle and is crucial for improving the readability of text.wordwrapThey can be elegantly folded to fit the width of the list items without breaking the word structure.

Deep understandingwordwrapHow it works and what to pay attention to

wordwrapThe filter mainly relies on spaces in the text to determine line breaks. This means that if there is a long string of continuous characters without any spaces in your text (for example, in languages such as Chinese, Japanese, and Korean that do not have natural word separators),wordwrapThe text will not be able to wrap within this long string. In this case, the browser may treat it as an indivisible 'word', which could lead to text overflowing the container.

Therefore, when usingwordwrapEnglish, especially when handling CJK (Chinese, Japanese, Korean) text, please note its characteristics. For scenes where it is necessary to force line breaks at any character position, it may be necessary to combine front-end CSS styles (such asword-break: break-all;oroverflow-wrap: break-word;）to ensure layout compatibility in extreme cases.

Related but different text processing methods

ExceptwordwrapUsed for "auto" wrap, AnQiCMS also provides other practical text processing filters. Although they are related to text length, the functions they implement are different.

  1. truncatecharsandtruncatewordsText truncation with ellipsisIf you need to shorten long text to a specified length and add an ellipsis at the end,...), thentruncatechars(truncated by character count) andtruncatewords(Truncated by word count) is a better choice. They are often used to display article summaries to ensure 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 the text into HTML tags or\n<br/><p>Labels wrap. They do not automatically insert line breaks based on length, but handle explicit line break marks in the source text. This is very useful for displaying segmented text entered by the user.

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

Examples of practical application scenarios

  • The summary display on the article list page:You can usetruncatecharsortruncatewordsControl the length of the summary to keep the page tidy.
  • Key parameters on the product detail page:If the value of a product parameter is too long, consider usingwordwrapAt appropriate positions, add line breaks to adapt to the layout and avoid overflow.
  • Descriptive text in the sidebar or widget:These areas have limited space,wordwraportruncatecharswhich can help you elegantly display information.

Master these text processing filters and it will give you greater control over the presentation of content in AnQiCMS templates, thereby creating websites that are more attractive and better meet user expectations. By using them flexibly,wordwrap/truncatecharsThe filters, you can ensure that the website provides an**English** reading experience on different devices and layouts.

Common Questions (FAQ)

Q1: Why?wordwrapDo the filters not work on Chinese text?A1:wordwrapThe filter inserts line breaks by identifying spaces in the text.