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 wrapping, users may face horizontal scrolling and text stacking issues, which seriously affect reading comfort and may even lead to user attrition.As an AnQiCMS user, 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 the website content.

Understanding the importance of wrapping long text

Imagine you are browsing an article on your phone and find that a paragraph of text is so long that it extends beyond the screen width, requiring you to swipe left and right just to read a single sentence. Such an experience is undoubtedly frustrating.Whether on the desktop or mobile, unreasonable text layout will increase the user's reading burden.Text wrapping not only ensures that the content always fits the user's device screen, avoiding horizontal scrolling, but also effectively controls the length of each line, making the layout more regular, reducing visual fatigue, and allowing readers to immerse themselves more smoothly in the content.

The core line break tool in AnQiCMS templates:wordwrapFilter

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

wordwrapThe usage of the filter is very intuitive. You just need to add it after the text variable you want to process.|wordwrap:数字You can do this, where 'number' represents the maximum number of characters per line of text.

For example, if you have a very long article content stored inarchiveContentIn variables, and you hope it to automatically wrap around every 50 characters or so (by words), you can use it like this:

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

Please note,wordwrapThe filter will use words separated by spaces as the basis when performing line breaks.This means it will try to avoid breaking words in the middle to maintain the integrity of the word, thereby improving readability.wordwrapThe filter will not force a line break in the middle of these consecutive characters.It only considers a line break when encountering a space.This means that if there are very long consecutive sentences without punctuation or spaces in your Chinese content, it may be necessary to combine other methods to assist in processing.

CSS styles to assist in optimizing the reading experience

In modern web design, CSS is the main means of achieving elegant line breaks for long text, in addition to template filters.You can globally control the line break behavior of article content by customizing CSS styles, without having to use a filter for each text variable.

The most commonly used CSS property isword-wrapandoverflow-wrap. Its purpose is to allow for word-breaking within a line box when the text content overflows, to prevent overflow. Typically, we would set it tobreak-wordorbreak-all(Choose according to requirements):

  • word-wrap: break-word;(or)overflow-wrap: break-word;This allows word-breaking within words to prevent content overflow. It is the most commonly used option, which tries to maintain the integrity of words as much as possible and breaks them only when necessary.
  • word-break: break-all;Allow a break between any characters, regardless of whether they are words.This option may be more effective when dealing with Chinese and other languages, as it does not depend on word boundaries, but 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 your template file CSS stylesheet:

.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 }}Content wrapped in a container witharticle-contentClass name's.divIn it, the CSS styles can take effect.

Handle manual line breaks in the editor:linebreaksFilter

Sometimes, when you are editing article content in the background, you might be accustomed to using the Enter key for line breaks. However, browsers do not default to interpreting returns (line breaks) in text\nThe content is parsed as a visible line break, rather than being treated as a space. The result is that the text that was originally segmented displays as a long string on the web.

To solve this problem, AnQiCMS template engine provideslinebreaksandlinebreaksbrFilter:

  • linebreaksThe filter will convert single newline characters in the text to<br />tags, while two consecutive newline characters will be converted to<p>and</p>paragraphs wrapped in tags.
  • linebreaksbrThe filter is simpler, it directly converts all newline characters to<br />Label.

This is particularly important for content input from rich text editors or Markdown editors, ensuring that the paragraphs and line breaks in the content are correctly rendered 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 a comma when using these filters:|safeFilters to ensure HTML tags (such as<br />or<p>Can be correctly parsed by the browser rather than displayed as plain text.

Content truncation as a supplement strategy for long text.

Although automatic line breaking 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 and only display a part of the content with an ellipsis. The AnQiCMS template engine also provides the corresponding filter:

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

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 with an ellipsis, making the list page look cleaner.

Summary

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