How the `wordwrap` filter automatically breaks long text to a specified length

In the daily operation of websites, we often encounter such situations: the content of the article is too long, or the text grabbed from other places has not been formatted, which causes the text content to exceed the container width when displayed on the web page, destroys the overall layout, and seriously affects the reading experience of users.Especially on mobile devices, long lines of text are even more inconvenient to read.wordwrapFilter, it can help us automatically wrap long text at a specified length to optimize the display effect of the content.

What iswordwrapFilter?

wordwrapThe filter is a built-in function of the Anqi CMS template engine, its main function is to "intelligently" break a long text content into lines according to the maximum length you set.The 'smart' aspect is that it tries to break lines between words to maintain the integrity of words, avoiding cutting a word in half, thus ensuring the readability of the content.

Why is it needed?wordwrapFilter?

UsewordwrapFilter, not only makes your website content look neater, but also brings multiple operational advantages:

1. Improve reading experienceEnglish: Long text lines increase the difficulty of users' reading, and their eyes need to move frequently from left to right. Auto line break can make each line of text a moderate length, reducing reading fatigue.
2. Optimize page layoutThe text content no longer arbitrarily stretches the container, you can more accurately control the element width, ensuring that the page maintains the expected beautiful layout on different devices and screen sizes.
3. Enhanced responsive performanceOn small screen devices like mobile phones,wordwrapIt can better adapt to limited display space, allowing content to be presented friendly on different terminals.
4. Improve SEO friendlinessAlthough not a direct SEO factor, good user experience (UX) will indirectly affect user stay time, bounce rate, and other indicators, which are all references for search engines to evaluate the quality of a website.

wordwrapHow to use the filter

In the templates of Anqi CMS, usewordwrapThe filter is very simple and intuitive. Its basic syntax is:

{{ obj|wordwrap:长度数字 }}

Here:

• objrepresents the text content you need to process, which can be a variable, a string, or any data that can be interpreted as text.
• 长度数字It is an integer representing the maximum number of characters you want per line of text.wordwrapIt will try to break the line based on this number.

For example, if you have a long English description and you want to display no more than 20 English characters (words) per line, you can write it like this:

{{ "This is a very long sentence that needs to be wrapped for better readability on your website."|wordwrap:20 }}

This code's output will be something like this:

This is a very long
sentence that needs
to be wrapped for
better readability
on your website.

You can see that the filter will try to wrap at spaces to ensure that words are complete.

Application and Precautions in Practice

wordwrapThe filter is very flexible in practical applications, but it also needs to pay attention to some details:

1. Differences in processing Chinese and English textThis is usingwordwrapis a very important point to note.wordwrapThe filter mainly relies on 'spaces' to identify words and to wrap lines.

   • English text: Because there are natural spaces between English words,wordwrapThe effect is usually very ideal, it will break the words to keep the semantics complete.
   • Chinese textThere are no spaces between Chinese characters. Therefore, if a paragraph of Chinese is continuous,wordwrapWill consider it as a very long "word". In this case, unless the text contains spaces or punctuation, it will notwordwrapThe line break will not be automatic between Chinese characters. If you need to force a line break at a specified length (even if it truncates Chinese characters), you may need to combine front-end CSS styles (such asword-break: break-all;）to achieve this, but this has gone beyondwordwrapthe scope of the filter's function.

2. CombinelinebreaksbrFilterIf the original text itself contains newline characters（\n)wordwrapit will respect these existing newlines. However, in HTML,\n并不会自动渲染为可见的换行。如果你希望这些换行符也能在页面上显示为English<br>标签，可以配合EnglishlinebreaksbrFilter usage:

   {{ content|wordwrap:50|linebreaksbr|safe }}
   

   This code will first convertcontentTranslate to English\nConverted to<br>Label.

3. UsesafeFilter HTML contentWhen the text content you are processing may itself contain HTML tags, to avoid the HTML tags being escaped into plain text (for example<p>becomes<p>), you shouldwordwrapimmediately aftersafeFilter:

   {{ archive.Description|wordwrap:80|safe }}
   

   This ensures that HTML tags in the text arewordwrapprocessed correctly and rendered by the browser.

4. In<pre>displayed accurately in the tags.For code blocks, poems, or any text that needs to be preserved with exact formatting,wordwrapcombined with HTML's,<pre>tags can provide excellent display effects.<pre>tags will preserve spaces and line breaks in the text.

   <pre>{% filter wordwrap:15 %}{% lorem 30 w %}{% endfilter %}</pre>
   

   This code will generate 30 random words of text, then format it to wrap every 15 words, and ensure it is displayed exactly as formatted on the page.

Example display

Let us feel through some specific exampleswordwrapThe effect of the filter:

1. Basic applicationSplit a long English text into lines every 10 words:

{{ "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."|wordwrap:10 }}

Output effect:

Lorem ipsum dolor
sit amet, consectetur
adipiscing elit. Sed
do eiusmod tempor
incididunt ut labore
et dolore magna
aliqua.

2. Combineloremand<pre>tagsUseloremGenerate random text with tags andwordwrapControl line breaks, then<pre>Labels maintain format:

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

Output effect:

<pre>Lorem ipsum dolor
sit amet, consectetur
adipisici elit, sed
eiusmod tempor incidunt
ut labore et dolore
magna aliqua.</pre>

3. Handle text with line breaks and HTML tagsAssumearticleContentContains the following content:这是第一段。<br>第二段内容很长，需要换行处理。

{{ articleContent|wordwrap:20|safe }}

IfarticleContentThe actual text is这是第一段。第二段内容很长，需要换行处理。, and there is no actual<br>If there is a label, the output will be:

这是第一段。第二段内容
很长，需要换行处理。

Note that, as it is Chinese, it will not wrap between Chinese characters until it encounters a period or other space symbol.

Summary

wordwrapThe filter is a small yet powerful tool in the AnQi CMS template that can greatly enhance user experience.It can help you easily solve the problem of poor display of long text on the page, making your website content more readable and beautiful.linebreaksbrandsafeWith other filters, it will make your content operation in AnQi CMS twice as effective.

---

Common Questions (FAQ)

1.wordwrapCan the filter handle automatic line breaks in Chinese text? wordwrapThe filter determines the line breaks by identifying spaces.For Chinese text, as there are no spaces between Chinese characters, it treats continuous Chinese characters as a single long 'word'. Therefore, by default, it is not possible to implement automatic line breaks between Chinese characters.It will only look for spaces or punctuation marks that exist in the text to break lines.