In AnQiCMS, managing website content, we often encounter scenarios where it is necessary to display long text, such as article summaries, product descriptions, or sidebar announcements.If these texts are not properly processed, it may lead to layout chaos, even exceeding the preset container width, seriously affecting user experience.wordwrapFilter, which helps us elegantly solve this problem, allowing long text content to automatically wrap to the desired length.

How can I flexibly set the line break length of these texts in AnQiCMS? This is mainly achieved by understandingwordwrapthe working mode of the filter.

UnderstandwordwrapFilter

wordwrapThe filter is a practical tool built into the AnQiCMS template system, whose core function is to automatically wrap a continuous text according to the specified character length.This is crucial for optimizing the visual presentation of content, ensuring that text displays well on screens of different sizes or different widths.

It should be clear that,wordwrapThe filter does not have a global 'default line break length' setting. Each time you use it in the template,wordwrapIt needs to be specified explicitly how many characters after it should be wrapped.This means you can apply different line lengths to each text area based on content and layout requirements, thus achieving highly flexible layout control.

wordwrapThe principle of operation is based on word boundaries.It will try to break lines at the spaces between words.Therefore, for text containing English words or separated by spaces, it handles word boundaries well, maintaining the natural readability of the content.However, if your text is continuous Chinese (or other non-space-separated languages), it will not wrap automatically between the characters, but will treat the entire continuous Chinese as a long 'word'.This is something that needs to be paid special attention to when used.

How to usewordwrapthe filter sets the line break length

UsewordwrapThe filter is very intuitive, mainly in two ways: as an inline filter directly acting on the variable, orfilteras a tag block to process a segment of content.

1. Inline usage: directly acting on the variable

This is the most common and simplest way to use it. You just need to add it after the variable you need to process|wordwrap:数字, and the 'number' is the character length at which you want the text to wrap.

For example, you want to display a maximum of 30 characters per line in an article summary:

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

Ifarchive.Description的内容是 “This is a very long article summary, and we hope it can automatically wrap to fit the page layout.”, 经过wordwrap:30After processing, it may internally become something similar to:

这是一段非常长的文章摘要，
我们希望它能自动换行，以
适应页面布局。

2. Asfiltera label block usage

When you need to format a long, static text content or other complex expressions for line breaks, you can use{% filter wordwrap:数字 %}and{% endfilter %}tag blocks.

For example, you have a very long help text and you hope that each line does not exceed 50 characters:

<div class="help-text">
    {% filter wordwrap:50 %}
        这是一个非常长的帮助文档，包含了各种详细说明和操作步骤，
        为了确保用户能够清晰阅读，我们决定对这段文本进行自动换行处理，
        让每一行的长度都保持在一个合理的范围内，提升阅读体验。
    {% endfilter %}
</div>

CombineloremThis usage is also very common when generating random text with tags:

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

CombinelinebreaksbrFilter implementation for HTML line breaks

It is worth noting that,wordwrapThe filter itself only performs line breaks in internal logic, and will not directly insert HTML line breaks into the text (such as<br />）。If you want these line breaks to appear as actual HTML multiline in the web page, rather than still displaying as a single line in the browser, you need to setwordwrapFilter is related tolinebreaksbrFilter combined use. At the same time, in order for the browser to correctly parse the inserted HTML tags, it also needs to be added|safeFilter.

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

So, the original line breaks will belinebreaksbrto<br />Tag, whilesafeThe filter ensures that these tags are rendered correctly by the browser, thus forming actual multiline display on the page.

Recommended for actual application

wordwrapThe filter has a high practical value in website operation. You can flexibly apply different line lengths according to different content areas and design requirements:

  • Sidebar widget or short announcement:These areas usually have limited space, you can set a smaller line break length, such as 15-20 characters, to ensure that the content does not overflow.
  • Article summary or product description:At the top of the list page or detail page, you can set a moderate line break length, such as 30-50 characters, which can display enough information while maintaining tidiness.
  • Rich text editor content:If your content is entered through a rich text editor, and you want some paragraphs to automatically wrap, you can配合linebreaksbrandsafeFilter usage, but note that this method will override the paragraph and line break styles of the built-in rich text editor. Please evaluate carefully.

By processingwordwrapFilter and precise control over line breaks, enabling you to effectively manage the layout of website content and enhance the reading experience of users on various devices and layouts.

Common Questions (FAQ)

1. Can it set a global default line break length for AnQiCMS?wordwrapFilter settings?

AnQiCMS currently does not provide global configurationwordwrapdefault length options.wordwrapFilter is used on demand, and you must explicitly specify the line length each time you call it, for example{{ 你的文本 | wordwrap:30 }}This design gives content operators the freedom to flexibly control the layout in different content areas.

2.wordwrapIs the filter effective for Chinese text?

wordwrapThe filter mainly breaks lines by identifying spaces between words.For continuous Chinese text, as there are no spaces between Chinese characters, it treats them as an indivisible whole and does not automatically wrap between Chinese characters.It is more suitable for text containing English words or separated by spaces.If you indeed need to force Chinese text to wrap at a fixed length, you may need to consider front-end JavaScript or other more complex backend processing solutions.

3. If I want towordwrapHow to display the line break effect as multiple lines on the web page?

wordwrapThe filter itself only handles line breaks internally and does not insert HTML line breaks. If you want these line breaks to actually appear as multiple lines on the web page, you need towordwrapFilter is related tolinebreaksbrthe filter.linebreaksbrWill convert line breaks in text to<br />tags. To ensure that these HTML tags can be correctly parsed by the browser, it is also necessary to add|safefilters. The complete usage example is:{{ 你的文本 | wordwrap:30 | linebreaksbr | safe }}.