How to use the `wordwrap` filter in AnQi CMS template to automatically wrap long text and avoid layout chaos or overflow?

In website content operation, we often encounter scenarios such as article details, product descriptions, or user comments, where long text content causes page layout to be disordered, even overflowing the container, seriously affecting user experience.Especially when a continuous English word without spaces or a long string of Chinese appears in a narrow area, the default line breaking mechanism of the browser may not meet our design requirements.Fortunately, AnQi CMS provides a very practical tool for template developers to elegantly solve this problem - that iswordwrapfilter.

ThiswordwrapThe filter, as the name implies, is used to process long text into 'word wrapping'.It will base on the number you set (i.e., the maximum number of characters per line), find spaces in the text to break lines, thus avoiding the text being too long in one line.By using it reasonably, we can ensure that long text automatically wraps without破坏 the page structure, making the content present more neat and beautiful.

How to usewordwrapFilter

Using in Anqi CMS template,wordwrapThe filter is very intuitive, its basic syntax is:{{ 变量 | wordwrap: 长度 }}.

• 变量It refers to the text content you want to be wrapped in a new line, such as the main text of an article, description, etc., which is usually obtained through template tags, for example{{ archive.Content }}.
• 长度It is an integer representing the maximum number of characters you want each line of text to display. When the text length exceeds this number, the filter will try to wrap at the nearest space.

This means if your content is a continuous string of English characters without spaces, or a continuous segment of Chinese text,wordwrapThe filter may not wrap as expected in the middle. This is because the filter mainly relies on the text inspacesTo judge the line break point. For Chinese content, since there are no spaces between characters, this filter defaults to not breaking in the middle of words.If you need to force a newline for Chinese or English without spaces, it may be necessary to combine other methods or CSS properties.

Here are some actual examples to help you understand its usage:

Example 1: Basic English text wrapping

Assuming you have an English description, you want each line to be no more than 15 characters (wrapping at spaces):

{% set longText = "This is a very long sentence that needs to be wrapped beautifully on the webpage." %}
<p>{{ longText | wordwrap: 15 }}</p>

This code may output content similar to this:

This is a very
long sentence
that needs to
be wrapped
beautifully on
the webpage.

As you can see,wordwrapThe filter performed line breaks when encountering spaces, maintaining the integrity of the words.

Example 2: Combine<pre>Tags andlinebreaksbrFilter, retain line break effect

Sometimes, we hope not only to break lines, but also to be able to reflect directly in HTML<br/>The effect of the tag, especially when the text content itself may contain newline characters. Anqicms provideslinebreaksbra filter that can remove newline characters from text\nto HTML<br/>.

<pre>{% filter wordwrap: 20 %}{% lorem 50 w %}{% endfilter %}</pre>

or combinelinebreaksbr:

<p>{{ "Lorem ipsum dolor sit amet, consectetur adipiscing elit." | wordwrap: 10 | linebreaksbr | safe }}</p>

This has been usedloremTag generates random Latin text for demonstration.wordwrap: 10It will limit the maximum length of each line to 10 characters,linebreaksbrThen it will convert the newly generated newline characters to<br/>,safeThe filter ensures that HTML tags can be normally parsed and displayed by the browser.

Example 3: The limitation of line breaks in Chinese text

If you try to use a continuous Chinese textwordwrapFilter:

This is a very very long Chinese text, which does not contain any spaces, so the wordwrap filter may not be able to perform effective line breaks based on spaces.