In website content operation, we often encounter situations where the text content is too long in scenarios such as article details, product descriptions, or user comments, which leads to chaotic page layout and even overflow of the container, seriously affecting the 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.wordwrapFilter.

ThiswordwrapFilter, as the name implies, is used to perform 'word wrapping' on long text.It will break the text into lines based on a number you set (i.e., the maximum number of characters per line), searching for spaces to avoid long lines of text.By using it reasonably, we can ensure that long text is automatically wrapped without destroying the page structure, making the content appear more neat and beautiful.

How to usewordwrapFilter

In the templates of Anqi CMS, usewordwrapThe filter is very intuitive, its basic syntax is:{{ 变量 | wordwrap: 长度 }}.

  • 变量Refers to the text content you want to process for line breaks, such as article content, descriptions, etc., usually obtained through template tags, for example{{ archive.Content }}.
  • 长度This 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 attempt to wrap at the nearest space.

这意味着如果你的内容是一串没有空格的连续英文字符，或者是一段连续的中文文字，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 usually no spaces between characters, this filter does not break in the middle of the character by default.If you need to force a line break for Chinese or spaceless English, you may need to combine other methods or CSS properties.

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

Example 1: Basic English text wrapping

Suppose you have an English description that 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 breaks lines at spaces to maintain word integrity.

Example 2: Combine<pre>Tags andlinebreaksbrFilter, preserve 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 label, especially when the text content itself may contain newline characters. Anqi CMS provideslinebreaksbra filter that can remove newline characters from text\nConverted to HTML,<br/>Label.

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

or combinedlinebreaksbr:

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

Here, we useloremLabel generates random Latin text for demonstration.wordwrap: 10It will limit each line to the longest 10 characters,linebreaksbrand then converts the new line characters generated into<br/>,safeThe filter ensures that HTML tags can be normally parsed and displayed by the browser.

Example 3: Limitation on line breaks in Chinese text

If you try to apply a filter to a continuous block of Chinese textwordwrapFilter:

`twig {% set chineseText = “This is a very very long Chinese text, it does not contain any spaces, so the wordwrap filter may not be able to perform effective line breaks based on spaces.” %}