How to automatically wrap long text in AnQiCMS templates for optimized reading experience?

In website content operation, optimizing the reading experience is a key factor in attracting and retaining users.Especially for long text content, if there is a lack of proper formatting and automatic line breaking, users may face issues such as horizontal scrolling and text stacking, which seriously affect reading comfort and even lead to user loss.As AnQiCMS users, we can take advantage of its powerful template engine and built-in features to easily implement automatic line breaks for long text, thereby greatly enhancing the reading experience of website content.

Understanding the importance of long text wrapping

Imagine browsing an article on your phone and finding that a paragraph of text is so long it extends beyond the screen width, requiring you to swipe side to side just to read one sentence. This experience is undoubtedly frustrating.Whether on the desktop or mobile end, unreasonable text layout will increase the reading burden of users.Text wrapping ensures that content always fits the user's device screen, avoids horizontal scrolling, effectively controls the length of each line of text, making the layout more uniform, reduces visual fatigue, and allows readers to immerse themselves more smoothly in the content.

AnQiCMS template's core line break tool:wordwrapFilter

AnQiCMS template engine provides a variety of filters (Filters), including:wordwrapThe filter is specifically designed to handle automatic line breaks in long text. This filter can intelligently wrap long text according to the specified character length.

wordwrapThe filter usage is very intuitive. You just need to add it after the text variable you want to process|wordwrap:数字and the number represents the maximum number of characters you want each line of text to have.

For example, if you have a long article content stored inarchiveContentIn a variable, and you want it to automatically wrap every 50 characters or so (by word), you can use it like this:

<div>
    {{ archiveContent|wordwrap:50|safe }}
</div>

Please note,wordwrapThe filter, when performing line breaks, uses space-separated words as the basis.This means it will try to avoid breaking in the middle of a word to maintain the integrity of the word, thereby improving readability.But, there is an important detail to understand: for continuous characters without spaces (such as Chinese text),wordwrapThe filter will not force a line break in the middle of these continuous characters.It only considers line breaks when encountering spaces. This means that if there are very long continuous sentences in your Chinese content without punctuation or spaces, it may be necessary to combine other methods for assistance processing.

CSS styles to assist in optimizing the reading experience

In addition to template filters, CSS is the main means to achieve elegant line breaks for long text in modern web design.You can globally control the line break behavior of article content through custom CSS styles without using filters for each text variable.

The most commonly used CSS property isword-wrapandoverflow-wrap. Its function is to allow word-breaking within the text when it overflows the text box to prevent overflow. Typically, we would set it tobreak-wordorbreak-allSelect based on requirement:

• word-wrap: break-word;(or)overflow-wrap: break-word;Allow breaking within words to prevent content overflow. This is the most commonly used option, which tries to maintain word integrity and only breaks when necessary.
• word-break: break-all;: Allow breaks between any characters, regardless of whether they are words or not.This option may be more effective in handling Chinese and other languages because it does not depend on word boundaries, but it may sacrifice a bit of the integrity of English words.

You can add these styles to the container of the article content (for example<article>or somedivelement) in the CSS stylesheet you include in your template file:

.article-content {
    word-wrap: break-word; /* 针对较旧的浏览器 */
    overflow-wrap: break-word; /* 现代浏览器推荐 */
    word-break: normal; /* 保持默认的单词断裂行为，结合上面两个属性 */
    line-height: 1.8; /* 调整行高，增加行间距，提升可读性 */
    max-width: 700px; /* 控制行宽，过长的行也影响阅读，这是推荐的实践 */
    margin: 0 auto; /* 居中内容区域 */
}

to{{ archiveContent|safe }}Such content wrapped in a container witharticle-contentclass namedivIt can make CSS styles take effect.

Handle manual line breaks in the editor:linebreaksFilter

Sometimes, when you are editing article content in the background, you may be accustomed to using the Enter key to create line breaks. However, browsers do not default to converting carriage returns (line breaks) in text.\nIt is parsed as a visible line break, but it is treated as a space. The result is that the originally segmented text is displayed as a long string on the web page.

To solve this problem, the AnQiCMS template engine provideslinebreaksandlinebreaksbrFilter:

• linebreaksA filter will convert a single newline character in the text to.<br />tags, and two consecutive newline characters will be converted to<p>and</p>Paragraph wrapped in tags.
• linebreaksbrThe filter is simpler, it will directly convert all newline characters to<br />.

This is particularly important for content entered from a rich text editor or Markdown editor, ensuring that the segmentation and line breaks in the content are rendered correctly on the front end. Usage is as follows:

<div class="article-content">
    {{ archiveContent|linebreaks|safe }}
</div>

Or, if you prefer a simple line break:

<div class="article-content">
    {{ archiveContent|linebreaksbr|safe }}
</div>

Remember to add these filters when using them:|safeFilters to ensure HTML tags (such as<br />or<p>It can be correctly parsed by the browser and not displayed as plain text.

Content truncation as a supplement strategy for long text.

Although automatic line wrapping solves the problem of text overflow, in some display scenarios, such as list pages, card previews, etc., you may want to truncate the long text directly, displaying only part of the content with an ellipsis. The AnQiCMS template engine also provides the corresponding filter:

• truncatechars:数字: Truncate by character count and add at the end....
• truncatewords:数字: Truncate by word count and add at the end....
• truncatechars_html:数字andtruncatewords_html:数字These two versions are specifically designed to handle text containing HTML tags, and they try to maintain the integrity of the HTML structure during truncation to avoid breaking the page layout due to incomplete tags.

For example, display the article summary on the article list page:

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

This will display the first 100 characters of the summary, followed by an ellipsis, making the list page look neater.

Summary

By flexibly using the AnQiCMS template engine providedwordwrap/linebreaksSeries filter, combined with the CSS style rules of the website itself, we can effectively solve the reading difficulties brought by long text.Whether it is to finely control line breaks at specified lengths in text, or to correctly render line breaks in the editor as HTML, or to elegantly truncate long content, AnQiCMS provides practical tools.Reasonable text processing not only makes your website content layout more professional, but also significantly improves the comfort of reading and the overall website experience.