In AnQiCMS, managing website content often involves scenarios where longer texts need to be displayed, such as article summaries, product descriptions, or sidebar announcements.If this text is not properly processed, it may cause layout confusion, even exceeding the preset container width, seriously affecting user experience.luckyly, AnQiCMS provideswordwrapA filter that helps us elegantly solve this problem, allowing long text content to automatically wrap to the desired length.

How can you flexibly set the line break length of this text in AnQiCMS? This is mainly through understandingwordwrapthe way the filter works.

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 and layouts of different widths.

It should be clarified that,wordwrapThere is no global 'default newline length' setting for the filter. Each time you use it in the templatewordwrapWhen, it needs to be explicitly specified where it should be wrapped after how many characters.This means that you can apply different line break lengths to different text areas and layout requirements, thus achieving highly flexible typesetting control.

wordwrapThe principle is based on word boundaries. It tries to break the lines 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 a continuous sequence of Chinese (or other non-space-separated languages), it will not automatically wrap at the Chinese characters but will treat the entire continuous Chinese as a long "word" for processing.This is a point that needs to be paid special attention to when using it.

How to usewordwrapThe filter sets the newline length

UsewordwrapThe filter is very intuitive, mainly in two ways: as an inline filter directly applied to a variable, or asfiltera tag block to process a segment of content.

1. Inline usage: directly applied to a 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 length of the text break you want.

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

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

Ifarchive.DescriptionThe content is 'This is a very long article summary, we hope it can automatically wrap to fit the page layout.', afterwordwrap:30After processing, it may internally become something similar to:

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

2. AsfilterUsing tag blocks

When you need to wrap 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 long help text and you want each line to be no more than 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 implements HTML line break

It is worth noting that,wordwrapThe filter itself only performs line breaks internally and does not directly insert HTML line breaks into the text (such as<br />If you want these line breaks to appear as actual multi-line HTML on a web page, instead of still being displayed as a single line in the browser, you need to changewordwrapthe filter meetslinebreaksbrFiltering is combined. At the same time, in order for the browser to correctly parse the inserted HTML tags, it is also necessary to add|safefilter.

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

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

Actual application suggestions

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 shorter line length, for example 15-20 characters, to ensure that the content does not overflow.
  • Article summary or product description:On 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 keeping it tidy.
  • Rich text editor content:If your content is entered through a rich text editor and you want some paragraphs to wrap automatically, you can cooperate withlinebreaksbrandsafeFilter usage, but please note that this method will override the paragraph and line break styles of the built-in rich text editor, please evaluate carefully.

By processingwordwrapPrecise control of filters and line breaks, allowing you to manage the layout of website content more effectively and enhance the reading experience across various devices and layouts.

Frequently Asked Questions (FAQ)

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

AnQiCMS does not provide global configuration at presentwordwrapdefault length option.wordwrapThe filter is used on-demand, and you need to specify the line break length explicitly each time, for example{{ 你的文本 | wordwrap:30 }}This design gives content operators the flexibility to control the layout in different content areas.

2.wordwrapDoes the filter work for Chinese text?

wordwrapThe filter mainly uses the recognition of spaces between words for line breaks.For continuous Chinese text, since Chinese characters are usually not separated by spaces, it treats them as an indivisible whole and does not automatically wrap between Chinese characters.It is more suitable for containing English words or text separated by spaces.If you really 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 wantwordwrapHow to make the line break effect display as multiple lines on a webpage?

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 towordwrapthe filter meetslinebreaksbrFilter combined use.linebreaksbrWill convert line breaks in text to<br />tags. At the same time, 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 }}.