In website content operation, especially dealing with things like category descriptions (category.Content）This is a field that may contain a large amount of text, and how to ensure that the content is displayed beautifully and easily readable on the front-end page, as well as achieving reasonable automatic line breaks, is a common and important issue.AnQiCMS provides a simple and powerful template system that can help us cleverly solve this challenge.

Deep understandingcategory.ContentField

in AnQiCMS,category.ContentThe field is designed to store detailed descriptions or rich text content.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 content usually needs to be displayed in full on the frontend page, but if the text is too long and does not have appropriate line break processing, it may lead to chaotic page layout, such as text overflowing the container, or displaying too much text in one line, thereby severely affecting the user's reading experience.

Unveiling automatic line break:wordwrapFilter comes into play

In order to elegantly solve the display problem of long text, AnQiCMS's template engine provides a very practical tool ——wordwrapFilter. It helps us achieve intelligent line breaks in 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.wordwrapIt can automatically collapse to the next line, avoiding the appearance of horizontal scroll bars or content overflow.

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

How to apply in the template: Actual operationwordwrap

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

Here are theobjRepresents the text variable you want to process,numberIt is the 'approximate' length you want for each line (usually refers to the number of words, or the number of continuous non-space character blocks).

Suppose you are building a category detail page, and you wantcategory.ContentThe text is wrapped at about 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.ContentField content and assign it tocategoryInfoa variable.
  • categoryInfo|wordwrap:50If socategoryInfoThe long text content in the variable is appliedwordwrapThe filter, and specify the line length as 50.
  • |safeThe filter is indispensable. Becausecategory.ContentFields typically store rich text, which may include<img>/<p>HTML tags.safeThe filter indicates to the template engine not to escape these HTML tags but to render them as normal HTML content. If missingsafeHTML tags may be displayed on the page in plain text form, destroying the layout.

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

Attention Points and **Practice

  1. Chinese and continuous text processing:As mentioned earlier,wordwrapThe filter mainly breaks lines based on spaces between words.For continuous long strings, especially Chinese, it will not force line breaks between characters.word-break: break-all;oroverflow-wrap: break-word;Apply these CSS properties to the HTML elements containing content so that the browser can break words or characters for wrapping when necessary, to avoid overflow.
  2. HTML Structure and CSS Style:The display effect of the content on the page is closely related to the width of the HTML element that wraps it and the CSS styles 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, so that the display effect is **. For example, setdiv.category-descriptionSet a maximum widthmax-width.
  3. Readability first:In the settingswordwrapWhen the length of the text is concerned, the core should be to enhance the user's reading experience.Lines that are too short can cause frequent visual jumps, reducing reading efficiency; lines that are too long are difficult to focus on.In general, the length of Chinese content **line** 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 features provided by AnQiCMSwordwrapFilter, you can easily managecategory.ContentThe display format of the equal-length text field, keeping your website content elegant and professional on any device. This not only enhances the user experience but also makes the overall website look more refined.

Common Questions (FAQ)

Q1:wordwrapThe filter can identify and retain the HTML tag structure?A1:wordwrapThe filter itself mainly handles plain text content. Whencategory.Contentyou need to use in conjunction with|safeFilter.safeThe filter will inform the template engine to treat the content as safe HTML, without escaping, so that the HTML tag structure can be normally parsed by the browser.wordwrapThe content will affect the text within HTML tags without damaging the tags themselves.

Q2: If mycategory.Contentfield content is written in Markdown format,wordwrapFilter can it work normally?A2: English.AnQiCMS supports Markdown editor.When you edit content in Markdown format in the background, 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|safefilters.

Q3: BesideswordwrapCan there be other methods 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 a suffix can be added at the end,...;truncatewords:numberThen, it truncates based on the number of words. These filters are very useful when displaying content summaries or previews, but they may lose some of the original text, andwordwrapThe purpose (keep the complete content and optimize the layout) is different. According to specific requirements, you can choose the appropriate filter.