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

In the daily operation of websites, we often encounter such situations: the article content is too long, or the text extracted from other places has not been formatted, resulting in the text content exceeding the container width when displayed on the web page, destroying the overall layout and seriously affecting the user's reading experience.Especially on mobile devices, long lines of text are more difficult to read.In order to solve this problem, AnQi CMS provided a very practical tool -wordwrapFilter, it can help us automatically wrap long text according to a specified length, thereby optimizing the display effect of the content.

What iswordwrapFilter?

wordwrapThe filter is a built-in feature of Anqi CMS template engine, which mainly serves 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, thereby ensuring the readability of the content.

Why is it neededwordwrapFilter?

UsewordwrapFilter, not only can make your website content look neater, but also bring a variety of operational advantages:

1. Improve reading experience: Long lines of text increase the difficulty of reading for users, and the eyes need to move back and forth frequently. By using automatic line breaks, the length of each line of text can be moderate, reducing reading fatigue.
2. Optimize page layoutThe text content no longer arbitrarily fills the container, you can more accurately control the width of the element, ensuring that the page maintains the expected beautiful layout on different devices and screen sizes.
3. Enhance responsive performanceOn mobile and other small-screen devices,wordwrapcan better adapt to limited display space, allowing content to be presented-friendly across different terminals.
4. Improve SEO friendliness: Although 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

Using in Anqi CMS template,wordwrapThe filter is very simple and intuitive. Its basic syntax is:

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

Here:

• objRepresents the text content you need to process, it can be a variable, a string, or any data that can be interpreted as text.
• 长度数字Is an integer representing the maximum number of characters you want per line.wordwrapWill attempt to wrap text 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 tries to wrap at spaces to ensure the integrity of the word.

Practical application and precautions

wordwrapThe filter is very flexible in practical applications, but some details need to be paid attention to:

1. The difference in handling Chinese and English textThis is usingwordwrapa very important note to pay attention to.wordwrapThe filter mainly relies on "spaces" to identify words and perform line breaks.

   • English text: As English words have natural spaces between them,wordwrapThe effect is usually very ideal, it will break the words between them, maintaining the integrity of semantics.
   • Chinese text: There are no spaces between Chinese characters. Therefore, if a segment of Chinese is continuous,wordwrapIt will consider it a very long "word". In this case, unless the text contains spaces or punctuation, thenwordwrapCannot automatically wrap between Chinese characters. If you need to force a line break for Chinese at a specified length (even if it truncates Chinese characters), you may need to combine it with frontend CSS styles (such asword-break: break-all;To implement, but this goes beyondwordwrapthe scope of the filter function.

2. CombinelinebreaksbrFilterIf the original text itself contains newline characters(\n)wordwrapit will respect these existing newlines. However, in HTML,\nIt will not automatically render as a visible newline. If you want these newline characters to also be displayed on the page as<br>you can use the tag in conjunction withlinebreaksbrThe filter is used:

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

   This code will first convertcontentTranslate 50-character (English word) length, then all\nto<br>.

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

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

   This ensures that HTML tags in the text arewordwrapstill able to be correctly parsed and rendered by the browser.

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

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

   This code will generate 30 random words, then break every 15 words into a new line, and ensure that it is displayed precisely in a pre-formatted style on the page.

Example display

Let us experience some specific exampleswordwrapThe effect of the filter:

1. Basic applicationSplit a long English text into lines of 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. Combinedloremand<pre>TagUseloremTags generate random text, and throughwordwrapControl line break and then use<pre>Keep the format of tags:

<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. Process 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>label, then the output will be:

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

Note that because it is Chinese, it does not wrap within Chinese characters, until it encounters a period or other space symbol.

Summary

wordwrapThe filter is a small tool in Anqi CMS template that can greatly enhance user experience.It can help you easily solve the problem of long text not displaying well on the page, making your website content more readable and beautiful.Understand its working principle, especially the differences in Chinese and English text processing, and make good use of collocationslinebreaksbrandsafeOther filters will make your content operation on Anqi CMS twice as effective.

Frequently Asked Questions (FAQ)

1.wordwrapCan the filter handle automatic line breaks for Chinese text? wordwrapThe filter mainly determines the line break point by identifying spaces. For Chinese text, as there are usually no spaces between Chinese characters, it treats consecutive characters as a single long 'word', so it cannot implement automatic line breaks between Chinese characters by default.It will only find spaces or punctuation marks in the text to perform line breaks.