When using AnQiCMS to manage website content, we often encounter such a scenario: we need to display the user-entered multi-line text content in the template, such as product descriptions, company profiles, or article summaries.This text is usually entered by users in the background text box and contains line breaks.linebreaksThe filter has become a tool we often consider using. So, how will this filter affect our CSS styling work?

The AnQi CMS template system adopts a syntax similar to the Django template engine, one of its core concepts being to process variable output through filters, making the content more flexible and structured in display. For handling multi-line text,linebreaksandlinebreaksbrThese are two very practical filters, their goal is to convert newline characters in plain text to HTML tags.

Understandinglinebreakswithlinebreaksbrworking principle

First, let's delve deeper into the specific functions of these two filters.

linebreaksFilterIt is used to convert line breaks in plain text to HTML<p>Tags and<br/>A label. Specifically, it treats each pair of consecutive newline characters (i.e., blank lines) as the end of a paragraph, thus inserting text blocks between them<p>...</p>Label. While a single newline character within a text block will be converted to<br/>Label, to achieve the effect of forced line breaks. For example, if the original text is:

第一行文本
第二行文本

第三行文本

afterlinebreaksThe filtered output HTML structure will be roughly:

<p>第一行文本<br />第二行文本</p><p>第三行文本</p>

linebreaksbrFilterThis filter works in a simpler and more direct way. It simply replaces all newline characters in the text with<br/>Labels, without introducing<p>Labels to distinguish paragraphs. For example, if the original text is:

第一行文本
第二行文本

第三行文本

afterlinebreaksbrThe filtered output HTML structure will be roughly:

第一行文本<br />第二行文本<br /><br />第三行文本

linebreaksThe impact on CSS style beautification

Understanding their working principles, we can analyzelinebreaksThe impact of filters on the beautification of CSS styles.

  1. Structuring content makes it easier to control block-level styles.:linebreaksOne of the major advantages of filters is that they automatically divide multi-line text.<p>(Paragraph) tag. This means you can easily apply block-level CSS styles to each paragraph, such as setting the paragraph's top and bottom margins (margin-top,margin-bottom）、line height（line-height）、text alignment（text-align）etc. This makes the text content visually more hierarchical and readable, and it is also easier to unify the style.

  2. consideration of default browser styles: It is important to note that browsers usually handle<p>The tag applies some default styles, the most common being the top and bottom margins.If you do not reset or adjust these default styles, it may cause the content area to have more whitespace than expected.linebreaksAfter that, it is usually necessary to define styles forptags to ensure that the layout conforms to the design requirements.

  3. <br/>Style restrictions on tags:linebreaksFilter used within paragraphs<br/>Tag, whose purpose is to force a line break. However,<br/>is an empty element, and its main function is to create a semantic break, its ability to beautify CSS styles is very limited. You cannot directly use CSS to<br/>Set height, background color, border, and other block-level styles. If more complex line spacing or separation effects are needed, consider directly inserting specific HTML structures into the content (for example<span>or<div>Or use CSS pseudo-elements (such as::beforeor::after) in conjunction with the parent element's style.

  4. Potential conflicts with Markdown rendering content AnQi CMS supports Markdown editor, if your multiline text content is entered in Markdown format, and the template uses something similar to{{archiveContent|render|safe}}This way to render, then this content has already been converted to HTML by the Markdown parser (for example, Markdown paragraphs will be converted to HTML)<p>Label, list will be converted to<ul><li>). At this point, if the already rendered HTML Markdown content is appliedlinebreaksA filter may cause redundancy or conflicts in the HTML structure, for example, by appearing<p><p>...</p></p>such nesting, which may disrupt the expected CSS styles. In this case, it is usually unnecessary to use it againlinebreaksorlinebreaksbr.

Choose the appropriate text conversion method

Then, how should we choose the appropriate text conversion method in different situations?

  • Plain text content requires clear paragraph distinctionIf your multi-line text is purely text input, which contains blank lines to distinguish paragraphs, and you want to style each paragraph independently using CSS (such as uniform paragraph spacing), thenlinebreaksThe filter is the ideal choice. It can convert your plain text into one with<p>The HTML structure of the tag provides a good semantic basis for subsequent CSS beautification. Remember to adjust the default styles in CSS.pThe style of the tag.

  • Plain text content, just need a simple forced line break: If your need is just to convert the line breaks in the text to simple HTML line breaks, and you do not want to introduce<p>The label brings paragraph semantics and default styles, thenlinebreaksbrThe filter would be a better choice. This is useful in scenarios where a compact display is needed or the content itself does not constitute a strict paragraph but requires a visual line break.

  • Markdown or rich text editor content: If your multi-line text is entered by the user through a Markdown editor or a rich text editor, then the content itself is usually already generated with the<p>/<strong>/<em>/<ul>The HTML structure of the tags. In this case, usuallynot recommendedto use againlinebreaksorlinebreaksbrFilter. Use it directly|safefor example, a filter (such as{{archive.Content|safe}}) to output the rendered HTML. Do not use it forciblylinebreaksIt may destroy the original HTML structure, causing style confusion. If you need to force a line break in Markdown content, you can usually insert it directly into the Markdown source file.<br/>.

Practical advice and code examples

In the Anqi CMS template, whether usinglinebreaksOrlinebreaksbrThe final output is always HTML content, so it is necessary to use|safeA filter to avoid HTML tags from being escaped, ensuring they are correctly parsed by the browser.

Suppose you have a variable namedarchive.DescriptionMulti-line plain text variable:

1. UselinebreaksFilter and apply CSS styling:

{# 模板文件（例如detail.html）中 #}
<style>
    .description-container p {
        margin-bottom: 1em; /* 段落底部间距 */
        line-height: 1.6;   /* 行高 */
        color: #333;        /* 文本颜色 */
        text-align: justify; /* 两端对齐 */
    }
</style>

<div class="description-container">
    {{ archive.Description|linebreaks|safe }}
</div>

here,linebreaksConvert plain text to<p>and<br/>We can go through.description-container pTo set the paragraph style uniformly

2. UselinebreaksbrFilter:

{# 模板文件（例如detail.html）中 #}
<style>
    .simple-description {
        line-height: 1.5; /* 简单行高 */
        color: #555;
    }
</style>

<div class="simple-description">
    {{ archive.Description|linebreaksbr|safe }}
</div>

Under this way, all line breaks are just<br/>So it will be more effective for the wholedivsettingline-height.

3. Process Markdown or rich text content:

Assumearchive.ContentIt is the HTML rendered from Markdown.

”`twig {# Template file (such as detail.html) #}