How to implement automatic line break for long text?

In website content operation, we often encounter situations where a large amount of text needs to be displayed. If these long texts are not properly handled, they may exceed the designed container, leading to a chaotic page layout and seriously affecting the user experience.AnQi CMS provides flexible and powerful template functions, which can easily solve the display issues of long text, especially for automatic line breaks.

Core Strategy: UtilizewordwrapFilter to implement text automatic line wrapping

The template system of AnQi CMS is built-in with many practical filters (Filters), among whichwordwrapThe filter is a tool specifically used for automatically wrapping long text.The function is to wrap a long text according to the character length we set.wordwrapThe filter attempts to break the line at the beginning of the next word to maintain the integrity of the word.

UsewordwrapThe filter is very intuitive, and you would typically call it in the template as follows:

{{ 您的长文本变量 | wordwrap: 每行字符数 }}

For example, if you want to make a text block namedarchive.Contentwrap automatically at about 50 characters per line, you can write it like this:

<div class="content-display">
    {{ archive.Content | wordwrap:50 | safe }}
</div>

In this example,archive.Contentis the content of the article you edit on the Anqi CMS backend.wordwrap:50The text content is formatted to wrap every approximately 50 characters.

It is especially important to note that,wordwrapThe filter is based onwordsIt performs line breaks, it looks for spaces in the text to determine the break points.This means that if your content is a string of continuous characters without spaces (such as a very long English URL, or a large block of continuous Chinese text), it will not break in the middle and may go beyond the container.

To avoid HTML tags contained in the content (such as<strong>/<a>The text enclosed in 【en】is displayed as plain text at the front end, rather than being parsed by the browser. You need to usewordwrapright after the filter.safeFilter.safeThe filter tells the template engine that this content is safe and does not need to be HTML-escaped. It can be output directly as HTML code.

Other related filters: truncation and line break options

ExceptwordwrapUsed for automatic line wrapping, the CMS also provides some other filters, which also have the effect of 'shortening' or 'formatting' when dealing with long text, but their purpose andwordwrap[en] Different. Understanding these differences helps you choose the most suitable tool.

1. truncatecharsandtruncatewords[en] : Text truncationThese filters are used to truncate text, not to wrap lines. They will cut off the extra text after reaching a specified length and add an ellipsis at the end....).

   • truncatechars:NTruncate by character count, including the ellipsis.
   • truncatewords:NTruncate by word count, including ellipsis.When your page only needs to display article summaries or limit the absolute length of text, these filters are very useful.truncatechars_html:Nandtruncatewords_html:N.

   For example:

   <p>{{ archive.Description | truncatechars:100 | safe }}</p>
   

   This code will truncate the article summary to 100 characters or less and add an ellipsis at the end.

2. linebreaksandlinebreaksbr: Convert newline characters to HTML tags.If your long text has already included line breaks in the AnQi CMS backend editing (such as paragraphs created by content editors using the Enter key), and you want these line breaks to be converted to HTML on the frontend,<br>or<p>Tags, you can use these two filters.

   • linebreaks: Converts newline characters to HTML's.<p>Tags, and adds them when there are blank lines.<br>.
   • linebreaksbr: Simply converts all newline characters to HTML's.<br>Labels. These two filters mainly handle existing newline markers in the text source, rather than likewordwrapauto-generated line breaks based on display width.

   For example:

   <div class="formatted-text">
       {{ category.Content | linebreaks | safe }}
   </div>
   

   This will convert newline characters in category content to paragraph or line break tags.

Strategies and considerations in practice

To elegantly display long text, it is usually necessary to combine the template filters of the Anqi CMS with the front-end CSS styles.

1. CSS auxiliary line break:For URLs that are long, strings of numbers, or Chinese text without spaces,wordwrapThe filter may not be able to break in the middle. In this case, you can use CSS to force the browser to break words and wrap lines. Add the following to your CSS for containers containing long text:

   .content-display {
       word-wrap: break-word; /* 兼容旧浏览器 */
       overflow-wrap: break-word; /* 现代浏览器 */
   }
   

   This will allow the browser to break the line within the word, even without spaces.

2. Content editing specifications:Encourage content editors to use paragraphs and line breaks reasonably when writing long texts, especially to appropriately insert spaces between Chinese paragraphs, which helpswordwrapthe filter work better.

3. Multi-platform testing:)The website content will be displayed on various devices, including PCs, tablets, and smartphones.Screen widths vary greatly across different devices, so it is essential to test the display of long text on various devices and browsers before publishing. Ensure that it automatically wraps gracefully in all scenarios to maintain an aesthetically pleasing layout.

By flexibly using the Anqi CMS,wordwrapFilters and other related tools, combined with appropriate CSS styles, will allow you to easily handle long text display on websites, providing users with a smooth, professional reading experience.

Common Questions and Answers (FAQ)

Q1: I usedwordwrapa filter, but long Chinese or English URLs still do not automatically wrap. What's going on?A1:wordwrapThe filter mainly breaks lines based on 'spaces' in the text. If your Chinese text is continuous without spaces, or if the English URL is a long string without spaces,wordwrapIt cannot find an appropriate breakpoint. In this case, you need to use CSS styles to assistword-wrap: break-word;oroverflow-wrap: break-word;Apply to HTML elements containing text, which will force the browser to break and wrap at any character to fit the container width.

Q2: When should we usewordwrapFilter, when should it be usedtruncatecharsortruncatewordsFilter?A2: It depends on your display needs.

• If you want the long text to be fully displayed within the container and simply adjust the number of lines based on the width, then you should usewordwrapFilter.
• If you only need to display a part of the text, such as an article summary, and add an ellipsis at the end to indicate that the content is incomplete, then you should usetruncatechars(truncated by character count) ortruncatewords(Truncated by word count).

Q3: My article content is edited by a rich text editor, it contains HTML tags, and it useswordwrapWhy did the HTML tags directly display on the page after the filter, instead of the styles?A3: This is because the template system of AnQi CMS defaults to escaping all output content as HTML entities to prevent XSS attacks. When your rich text content is processedwordwrapAfter processing, if it is not explicitly told to the template engine that this content is safe HTML, it will escape the<p>/<strong>tags as well.<p>/<strong>This will cause it to be displayed directly. The solution is towordwrap