How to implement automatic line breaks for long text in the `category.Content` field of AnQiCMS?

In website content operation, especially dealing with category descriptions (category.ContentWhen dealing with fields that may contain a large amount of text, how to ensure that the content is displayed beautifully and readably on the frontend page and achieve reasonable automatic line breaks is a common and important issue.AnQiCMS provides a simple and powerful template mechanism that can help us cleverly solve this challenge.

Deep understandingcategory.Contentfield

In AnQiCMS,category.ContentThe field is designed to store the detailed introduction or rich text content of the classification.It allows you to input rich information with pictures and text, such as detailed descriptions of product categories, background introductions of service categories, etc.This field's content usually needs to be displayed completely on the front-end page, but if the text is too long and there is no proper line break handling, it may cause the page layout to be disordered, such as text overflowing the container, or displaying too much text in a single line, which can seriously affect the user's reading experience.

Unveiling automatic line break:wordwrapFilter comes in!

To elegantly solve the problem of displaying long text, AnQiCMS's template engine provides a very practical toolwordwrapFilter. It can help us achieve intelligent line breaks for content, keeping the page neat.

wordwrapAs the name implies, its function is to insert line breaks in long text according to the specified length.This is very helpful for controlling paragraph width and improving readability.For example, when a text is too long and exceeds the screen display range,wordwrapIt can automatically collapse to the next line, avoiding the appearance of horizontal scrollbars or content overflow.

It is worth noting that,wordwrapIs line-breaking by "word". This means that if your text is a long word without spaces (such as a continuous English string), it will not break in the middle of the word.For Chinese content, as there are no spaces between Chinese characters,wordwrapThe filter will not force a line break between individual Chinese characters.In this case, the browser will try to break at a suitable character position (such as after punctuation) or may overflow the container if there is not enough space.Understanding this is particularly important for the layout of Chinese websites.

How to apply in the templatewordwrap

In the AnQiCMS template,wordwrapThe basic syntax of the filter is very intuitive:{{ obj|wordwrap:number }}.

HereobjRepresents the text variable you need to process, andnumberIs the approximate length you want for each line (usually referring to the number of words, or the number of continuous non-space characters).

Suppose you are building a category detail page and you wantcategory.ContentThe text should be wrapped around 50 characters per line, and you can apply it like this:

<div class="category-description">
    {% categoryDetail categoryInfo with name="Content" %}
    {{ categoryInfo|wordwrap:50|safe }}
    {% endcategoryDetail %}
</div>

In this example:

• {% categoryDetail categoryInfo with name="Content" %}It is a template tag of AnQiCMS, used to get the current category ofContentField content and assign it tocategoryInfoVariable.
• categoryInfo|wordwrap:50Then the value ofcategoryInfoApply long text content in the variablewordwrapFilter, and specify the line length to be 50.
• |safeFilters are indispensable. Becausecategory.ContentFields usually store rich text that may contain<img>/<p>etc. HTML tags.safeThe filter indicates that the template engine should not escape these HTML tags, but rather render them as normal HTML content. If missingsafeComma HTML tags may be displayed as plain text on the page, destroying the layout.

In this way, you can flexibly control the display effect of long text on the front end without modifying the original database content.

Cautionary notes and **practice

1. Chinese and continuous text processing:As mentioned before,wordwrapThe filter mainly breaks lines based on spaces between words. For continuous long strings, especially Chinese, it will not force line breaks between characters.If you need to enforce a stricter forced line break for Chinese or long English without spaces, you may need to combine CSS styles, for exampleword-break: break-all;oroverflow-wrap: break-word;Apply these CSS properties to the HTML elements containing the content, which can force the browser to break words or characters for line breaks when necessary, to avoid overflow.
2. HTML Structure and CSS Styles:The content displayed on the page is closely related to the width of the HTML element that wraps it and the CSS style you define. Even if you usewordwrapIf the container width is very large, you may not see the obvious line break effect. Make sure your layout and CSS work togetherwordwrapFilter to achieve **display effect. For example, setdiv.category-descriptionSet a maximum widthmax-width.
3. Readability first:In the settingwordwrapWhen determining the length, it should focus on enhancing the user's reading experience. Too short lines lead to frequent visual jumps, reducing reading efficiency;Long lines are difficult to focus on. Generally, the length of Chinese content is between 25-35 characters, while English may be slightly longer.Adjust this value based on your website design and target audience.

By flexibly using the AnQiCMS providedwordwrapFilter, you can easily managecategory.ContentThe display format of text fields of equal length, which makes your website content elegant and professional on any device. This not only enhances the user experience but also makes the website look more refined.

Frequently Asked Questions (FAQ)

Q1:wordwrapCan the filter recognize and retain the structure of HTML tags?A1:wordwrapThe filter itself mainly processes plain text content. Whencategory.Contenttags are included, you need to use it in conjunction with|safefilter.safeThe filter tells the template engine to treat the content as safe HTML, without escaping, so that the structure of HTML tags can be normally parsed by the browser.wordwrapAffects the text content inside HTML tags without damaging the tags themselves.

Q2: If mycategory.ContentThe field content is written in Markdown format,wordwrapCan the filter still work normally?A2: Can. AnQiCMS supports Markdown editor.When you edit content in the background in Markdown format, the system will first convert Markdown to HTML before rendering it to the front end.wordwrapThe filter will act on the text part of the converted HTML content. Similarly, to ensure that the HTML structure is not escaped, it still needs to be paired with|safefilter usage.

Q3: BesideswordwrapIs there another way to control the display of long text, such as truncating the text and displaying “…”?A3: Yes, AnQiCMS's template engine also provides other useful filters. For example,truncatechars:numbertext can be truncated based on the number of characters and appended at the end...;truncatewords:numberIt truncates based on the number of words. These filters are very useful when displaying content summaries or previews, but they will lose some of the original text, andwordwrapThe purpose is different (keep the complete content and optimize the layout). Depending on specific needs, you can choose the appropriate filter.