In daily website operation and content management, we often encounter scenarios where we need to view system logs, user submitted reports, or various detailed records.These records usually contain a large amount of text information, some even very long messages.When these long messages are displayed directly on the management backend or report page without processing, they often bring some inconvenience in reading: the page layout may be stretched, resulting in difficult-to-handle horizontal scrollbars, or key information may be compressed and difficult to identify.

AnQi CMS provides a series of practical template filters to help us optimize the display of content, including one namedwordwrapThe filter, which can effectively solve the problem of long text display.

UnderstandingwordwrapThe working principle of the filter

wordwrapThe filter, as the name implies, its core function is to automatically wrap the text content that exceeds the specified length.Its goal is to improve the readability of text, avoiding excessively long single-line text that requires users to scroll horizontally to read it completely.

Used in the template of AnQi CMSwordwrapFiltering, we need to provide it with two main pieces of information: the text content to be processed, and the maximum length of each line of text. Its basic usage is{{ obj|wordwrap:数字 }}Here,objThis is the long text variable that is to be processed, and数字then it is the maximum number of characters per line you expect.

For example, if your log variable name islogMessageand you want each line of text to display a maximum of 80 characters, you can use it like this: 

<div>
    {{ logMessage|wordwrap:80 }}
</div>

In this way,logMessageThe text displayed will be automatically split into multiple lines, with no more than 80 characters per line, greatly enhancing the reading experience.

wordwrapActual application in the Aanqi CMS log or report

  1. Optimize system log displayThe system log of Anqi CMS, such as error reports, performance monitoring records, etc., may contain detailed stack trace information, error descriptions, or lengthy operational procedures.These messages, if not processed with line breaks, may cause the log page to be disorganized and difficult to quickly locate issues.wordwrapFilter, which can keep each log item within a fixed width range, making the log list neat and orderly, and convenient for operation personnel to quickly browse and analyze.

  2. Enhance user submitted reports or feedbackIn some cases, users may submit longer text content through website forms, such as detailed product inquiries, feedback, or complaints.If this content is displayed directly on the background report or audit interface without processing, it is likely to disrupt the page layout and affect management efficiency.wordwrapThe filter ensures that the long text submitted by these users is displayed in good format, avoiding destruction of the table structure, and allowing operation personnel to review and handle it more comfortably.

  3. Improve the experience of the content review interfaceFor self-media operators or users managing multiple sites, content review is a common procedure.The content waiting for review may include draft articles, comments, messages, etc., among which there are lengthy and even improperly formatted text.wordwrapEnsure that the content is presented in neat paragraphs, reducing the visual burden on the reviewers and improving review efficiency.

UsewordwrapThings to note when using it

AlthoughwordwrapThe filter function is powerful, but there are also some key points to note when using it to ensure the display effect:**

  • The line break is based on spaces.:wordwrapThe filter mainly breaks lines between words (i.e., at spaces). This means that if a piece of text contains continuous, long strings without spaces (such as a very long URL, a sequence of consecutive alphanumeric characters, or a long Chinese sentence without punctuation),wordwrapFilter cannot split it because it cannot find 'word boundaries'. In this case, the long string will still exceed the line width you set.
  • Complement HTML display:wordwrapThe filter itself only changes the structure of the string; it does not automatically insert HTML at the line breaks.<br/>Label. If your log or report is displayed on an HTML page and you want the line break to be visually represented, you usually need towordwrapthe result through|linebreaksbrFilter processing, or place the text in<pre>tags to retain the original whitespace and newline characters. For example:{{ logMessage|wordwrap:80|linebreaksbr|safe }}.safeFilters are necessary because they willlinebreaksbrGenerated<br/>parse tags into HTML elements.

By making reasonable use ofwordwrapFilter, users of Anqi CMS can significantly improve the ease of use of the backend management interface and the reading experience of data reports, making content operations more efficient and smooth.

Common Questions (FAQ)

Q1:wordwrapHow to use the filter with HTML tags to achieve line break effects on the page?

A1:wordwrapThe filter itself performs logical line breaks at the string level, it does not add HTML to the output.<br/>tags. To actually see the line break effect in the browser, you need towordwrapFiltered results are passed on to|linebreaksbrA filter that converts logical newline characters to<br/>Tags. At the same time, sincelinebreaksbrHTML tags will be generated, you also need to use|safeFilter to prevent these tags from being escaped, ensuring they are correctly parsed by the browser. A complete usage example is{{ 变量|wordwrap:数字|linebreaksbr|safe }}。Additionally, if you wish to preserve the original text format, including all whitespace and line breaks, you can also place the text content within<pre>HTML tags.

Q2: If my long message is continuous Chinese,wordwrapCan the filter still work?

A2:wordwrapThe filter mainly relies on the 'word boundaries' (i.e., spaces) in the text for line breaks. If your long message is continuous Chinese text without spaces or recognizable punctuation marks as separators,wordwrapFilter will not be able to perform effective automatic wrapping.It will treat the entire Chinese long string as a 'word', even if it exceeds the set length, it may not break the line either.In this case, you may need to consider other text processing methods, or avoid overly long continuous Chinese paragraphs when entering content.

Q3:wordwrapfilters andtruncatecharsWhat are the differences between filters? How should I choose?

A3: These filters have different uses.

  • wordwrapIntended to "split" long text into multiple lines for display, improving readability, while retaining all the content of the text.
  • truncatecharsThe text is truncated to a specified length and an ellipsis (…) is added at the end, discarding the content beyond that. Which filter to choose depends on your needs: if you need to display all the information in full, but want it to look more beautiful and readable,wordwrapis a better choice. If you just want to display a part of the text as a summary or preview, and do not care about the completeness of the content, thentruncatecharsis more suitable.