When using AnQiCMS to build and manage websites, we often need to handle various lengths of text content.Especially in today's increasingly popular responsive design, long text can cause layout chaos on different devices, such as text overflowing the container, destroying the beauty of the page, and even affecting the user experience.wordwrapFilter.

wordwrapThe filter, as the name suggests, mainly serves the purpose of automatically wrapping long text content to the specified length.This is like setting a 'width limit' for a piece of text. When the text reaches this width, it will automatically find a suitable breakpoint for line breaks, ensuring that the text is displayed within the preset range, making the page layout neater and improving the readability of the content.

How to applywordwrapFilter

In AnQiCMS template files, usewordwrapThe filter is very intuitive. Its basic syntax is{{ obj|wordwrap:number }}.

  • obj：represents the text content variable you want to process, which can be article titles, descriptions, content snippets, etc., any string type of data.
  • numberThis is an integer representing the maximum number of characters you want to display per line of text. When the text reaches this character limit,wordwrapthe filter will try to insert a newline character.

Let us understand its usage through some specific examples:

Suppose you have a variablearchive.DescriptionIt stores a relatively long article description, and you want it to wrap automatically every 20 characters:

<p>{{ archive.Description|wordwrap:20 }}</p>

This code willarchive.DescriptionThe content processed is displayed in a paragraph<p>In it, the maximum length of each line of text is 20 characters.

If you want the line break effect to be truly displayed in the HTML page<br/>Label is presented in the form of, needs towordwrapFilter is related tolinebreaksbrthe filter.linebreaksbrThe filter will replace newline characters in the text with\n<br/>Label.

<p>{{ archive.Description|wordwrap:20|linebreaksbr|safe }}</p>

It should be noted that,|safeFilter is essential because it tells the template engine that this content is safe and does not require HTML escaping, so<br/>Labels must be parsed correctly by the browser and displayed as line breaks.

For longer text or text that requires multiple processing, you can also use{% filter %}tag blocks to wrapwordwrapFilter, so that it can handle all content within the tag block:

{% filter wordwrap:30 %}
    这里是一段非常非常长的文本内容，它将会被wordwrap过滤器自动在每30个字符左右进行换行处理，以确保在页面上的显示效果更加美观和易读。
    您可以使用这个过滤器来优化文章摘要、产品描述等，让它们在有限的显示空间内保持良好的视觉呈现。
{% endfilter %}

Deep understandingwordwrapworking principle and precautions

wordwrapWhen the filter performs line breaks, it mainly relies on the text in thespacesIdentify word boundaries and perform line breaks. This means that if your text is a continuous, spaceless string, such as a word without spaces in English, or languages such as Chinese, Japanese, Korean (CJK) where there are no natural spaces between characters, wordwrapThe filter willCannotForce a newline between characters.It treats the entire continuous string as a whole until it encounters the first space or reaches the specified character count, but will not break in the middle of a word.

For example, forThisisalongwordwithoutspaceseven if you have setwordwrap:5it will still display as a full line. This is also true for Chinese text,安企内容管理系统Even if the character limit is exceeded, it will not break between '安' and '企', as there is no space as a breakpoint.

Therefore, when dealing with CJK language content, if it is necessary to force a line break at any character position, it may be necessary to consider other methods, such as CSS stylesword-break: break-all;oroverflow-wrap: break-word;To implement more flexible word segmentation and line break control. However, for languages separated by spaces (such as English),wordwrapThe filter is a powerful and practical tool for automatically wrapping long text.

By making reasonable use ofwordwrapFilter, you can make your AnQiCMS website content present a **visual effect** on various devices and layouts, providing visitors with a smoother and more comfortable reading experience.

Common Questions (FAQ)

1.wordwrapIs the filter effective for Chinese text?

wordwrapFilter is mainly based on spaces in the text for line breaks. Since there are no natural spaces between characters in Chinese, Japanese, Korean, and other CJK languages,wordwrapThe filter cannot break in the middle of CJK characters when encountering consecutive ones.It treats a long continuous sequence of CJK characters as a whole and only breaks the line when it encounters a space (if any).wordwrapThe auto line-wrap effect may not meet your expectations.

2. BesideswordwrapDoes AnQiCMS have other methods for truncating or formatting long text?

Of course there is. AnQiCMS provides various filters to process text content:

  • truncatechars:number: Truncate text by character count, using...to replace the excess. It will truncate words.
  • truncatewords:numberTruncate text by word count, the excess part is replaced with....
  • truncatechars_html:numberandtruncatewords_html:numberEnglish translation: : Similar to the above, but specifically designed to truncate text containing HTML tags while attempting to maintain the integrity of the HTML structure.
  • linebreaksbr：将文本中的换行符（English）\n<br/>Label. You can select an appropriate filter according to your specific needs.

3. What should I do if I need to force a line break at any character position (even without spaces)?

wordwrapFilter cannot force line breaks between consecutive characters without spaces.If you have such a requirement, especially when dealing with CJK text or very long English words, it is usually combined with CSS styles to solve the problem.word-break: break-all;oroverflow-wrap: break-word;Property. These CSS properties can indicate to the browser to force a break at any character position if necessary to prevent text overflow.