How to implement forced line breaks (not by word) in AnQiCMS templates like Word documents?

On the display of website content, the layout of text is often a key factor affecting the user's reading experience.Sometimes, we want the text to be able to force a line break at a specific position, like in a Word document, rather than being automatically wrapped by the browser at word boundaries.Especially when displaying code, special formatted text, or when precise control of visual effects is needed, this need becomes particularly important.For AnQiCMS users, through the flexible template system, we can easily achieve the forced line break effect similar to Word documents, and can also further control the text wrap style in detail.

Understanding the implementation of 'forced line break' in web pages

Firstly, we need to clarify that in the context of web (HTML), 'forced line break' usually refers to inserting<br/>Label. This is pressing in a Word document.Shift + EnterThe effect of the key is similar, that is, no matter whether the current line is full, a new line is started immediately at the cursor position.And the browser's default text wrapping is determined by the integrity of the word to decide whether a line break is needed.

AnQiCMS's template engine supports syntax similar to Django, which means we can take advantage of the powerful filters it provides to process text content and achieve the layout effect we want.

UtilizelinebreaksbrFilter implements explicit line break

AnQiCMS template system built-in a very practical filter namedlinebreaksbrThis filter's main function is to convert all line breaks in the text\nto HTML.<br/>Label. This is the core method to implement an explicit line break similar to that in Word documents.

Usage:

Assuming your article content is stored inarchiveContentThis variable contains, and you want to convert all manual line breaks (such as those pressed when editing in the background) into new lines on the web page, you can use it in the template like this:EnterThe key) can be converted into a new line on the web page, you can use it in the template like this:

{# 假设 archiveContent 变量包含了你希望处理的文本内容 #}
<div class="article-content">
    {{ archiveContent|linebreaksbr|safe }}
</div>

This is something that needs to be noted,|safeThe filter is indispensable. The template engine of AnQiCMS defaults to escaping all output HTML content for safety, which will<to<,>to>etc. If not added,|safe,linebreaksbrGenerated by the filter<br/>Tags are displayed as plain text, rather than being parsed by the browser as line breaks. Therefore,|safeEnsuredlinebreaksbrThe generated HTML tags are rendered correctly.

The origin of text content and the impact of Markdown

In AnQiCMS, the main content of articles or pages is usually stored inContentField. This field's content may be generated by different editors, including rich text editors or Markdown editors.

• Rich text editor:If the content is edited by a rich text editor, you can directly pressEnterthe key will be automatically inserted<br/>the tag or wrap the text in<p>the tag, at this pointlinebreaksbrThe filter may not be necessary (unless you need to process more within these tags)\n)
• Markdown editor:If the Markdown editor is enabled (which can be configured in the "Global Settings" -> "Content Settings"), the syntax of Markdown itself will handle line breaks. Usually, a hard return (directly pressed in the Markdown source file)Enter) is rendered based on the context<br/>or merged. Two hard returns create a new paragraph<p>tags).

No matter the form of the contentlinebreaksbrThe filter can effectively handle the text existing in\ncharacter. If you are sure the content is in Markdown format and you want to convert it to HTML, you can uselinebreaksbrbefore ittag-/anqiapi-archive/142.htmlinContentfield mentionedrender=trueparameters:

{# 如果 archiveContent 是 Markdown 格式，并且你希望它先渲染成 HTML，再处理换行 #}
{%- archiveDetail articleContent with name="Content" render=true %}
<div class="content-wrapper">
    {{ articleContent|linebreaksbr|safe }}
</div>

This, even though Markdown itself does not convert all\nto<br/>,linebreaksbrIt can also scan and convert the text within after Markdown is rendered to HTML,\nWith<br/>Provide a more consistent forced line break effect.

More detailed control: Use CSS to implement automatic text wrapping (not by word)

Sometimes, the user may not need to explicitly insert in the text<br/>Labels, but instead, I hope that text can automatically break and wrap at any character when it reaches the edge of the container, rather than adhere to the integrity of the word and break.This is especially common in certain Chinese or Korean language layouts, as the concept of 'word' is not clear in these languages.

This "word-wrap" automatic line break effect is mainly achieved through CSS, not through template filters. You can add the following CSS properties to the HTML elements containing text:

.content-wrapper {
    word-break: break-all; /* 强制在任意字符处换行，包括单词内部 */
    /* 替代方案，更兼容旧版本浏览器：允许在单词内断开 */
    /* overflow-wrap: break-word; */
    /* word-wrap: break-word; /* IE和旧版浏览器兼容 */
}

• word-break: break-all;This attribute will force the browser to break the text at any character, even if the character is in the middle of a word, thus achieving a complete 'non-word' wrapping.
• overflow-wrap: break-word;(or its old name}word-wrap: break-word;This property is relatively gentle, it will try to break lines between words as much as possible, but if a word is too long and cannot be fully displayed in line, it will allow breaking within the word.

Important reminder:Remember, the CSS property mentioned above controls the 'auto-wrap' behavior of text, andlinebreaksbrThe 'explicit forced line break' inserted by the filter is two different concepts.You can choose one or both of them according to your actual needs to achieve the text formatting effect of **.For example, first uselinebreaksbrProcess manual line breaks in the article and then use CSS to ensure that long code lines automatically wrap at the container edge.

By using AnQiCMS's flexible template system and the cooperation with CSS, whether it is to explicitly insert line breaks or to implement automatic line breaks without word boundaries, you can easily manage and optimize the display effect of website content.

Frequently Asked Questions (FAQ)

1. Ask: How can I implement paragraph breaks (i.e., each break becomes a new paragraph) instead of simple inline breaks? Answer:If you want each newline character in the text\nAll are converted into new HTML paragraphs(<p>tags), which can be used in AnQiCMS templates(linebreaksfilter. It will convert a single newline into<br/>This generates a new one when two or more consecutive newline characters are present<p>Similarly, a tag.