How to implement automatic line break display for long text?

In website content operations, 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, causing page layout to become disordered and severely affecting user experience.Anqi CMS provides us with flexible and powerful template functions, which can easily solve the display problems of long text, especially for automatic line breaks.

Core strategy: utilizingwordwrapFilter implementation for text automatic line break

The AnQi CMS template system is built-in with many practical filters (Filters), among whichwordwrapThe filter is specifically used to handle long text automatic line breaks.Its function is to wrap a long text according to the character length we set.When a line of text reaches a specified length,wordwrapThe filter tries to break lines at the start of the next word to maintain the integrity of the word.

UsewordwrapThe filter is very intuitive, you usually call it like this in the template:

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

For example, if you want to make a long text namedarchive.Contentwrap automatically at about 50 characters per line

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

In this example,archive.Contentit is the article content you edit in the Anqi CMS background.wordwrap:50The text content is wrapped every approximately 50 characters.

It should be noted particularly that,wordwrapThe filter is based onwordsIt performs line breaks, it finds 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 long English URL or a large block of continuous Chinese text), it will not automatically break in the middle and may extend beyond the container.

To avoid HTML tags contained in the content (such as<strong>/<a>It is treated as ordinary text on the front end and not parsed by the browser, you need to usewordwrapafter the filter is usedsafefilter.safeThe filter tells the template engine that this content is safe and does not need to be escaped as HTML entities. It can be output directly as HTML code.

Other related filters: truncation and line break options

exceptwordwrapUsed for automatic line breaks, Anqi CMS also provides some other filters, which although they also play a role in "shortening" or "formatting" long text, their purpose andwordwrapDifferent. Understanding these differences will help you choose the most suitable tool.

1. truncatecharsandtruncatewordsText truncated:These filters are used to truncate text instead of wrapping. They will cut off the extra text after reaching the specified length and add an ellipsis at the end (...)

   • truncatechars:N: Truncate by character count, including an ellipsis.
   • truncatewords:N: Truncate by word count, including an ellipsis. These filters are very useful when your page only needs to display an article summary or limit the absolute length of text.If your text contains HTML tags, in order to avoid the structure being destroyed after truncation, please use their corresponding HTML safe versions: truncatechars_html:Nandtruncatewords_html:N.

   For example:

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

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

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

   • linebreaks: Converts line breaks to HTML.<p>Tags, and adds them when there are blank lines.<br>.
   • linebreaksbr: Simply converts all line breaks to HTML.<br>Label. These filters mainly handle the existing line breaks in the text source, rather thanwordwraplike automatically generating line breaks based on display width.

   For example:

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

   This will convert line breaks in category content to paragraphs or line break tags.

Strategies and considerations in practice**

To implement the elegant display of long text, it is usually necessary to combine the template filter of Anqicms with the front-end CSS style.

1. CSS line break aid:For long URLs, long strings of numbers, or Chinese text without spaces, etc.,wordwrapThe filter may not 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 the container in your CSS:

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

   This will allow the browser to wrap words within a word, even without spaces.

2. Content editing specification: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 test:The website content will be displayed on various devices including PC, tablet, and smartphone.There is a significant difference in screen width among different devices, therefore, it is necessary to test the display effect of long text on different devices and browsers before publishing, to ensure that it can automatically wrap gracefully in all scenarios and maintain a beautiful layout.

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

Frequently Asked Questions (FAQ)

Q1: I usedwordwrapthe filter, but the long Chinese or English URL does not automatically wrap, what is the matter?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,wordwrapCannot find a suitable breakpoint. In this case, you need to use CSS styles to assist.word-wrap: break-word;oroverflow-wrap: break-word;Apply to the HTML element containing text, which will force the browser to break words at any character to fit the container width.

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

• If you want the long text to be displayed completely inside the container, 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: The content of my article is edited by a rich text editor, which includes HTML tags and useswordwrapAfter the filter, why did the HTML tags appear directly on the page instead of the style?A3: This is because the Anqi CMS template system defaults to escaping all output content with HTML entities to prevent XSS attacks. When your rich text content is processed bywordwrapAfter processing, if the template engine is not explicitly told that this content is safe HTML, it will escape the contents in it<p>/<strong>and tags like that<p>/<strong>, causing it to be displayed directly. The solution is towordwrap