In AnQiCMS template, flexibly controlling text wrapping is a key factor in optimizing content display and user experience.When encountering long text content, if not processed, it may lead to layout disorder or difficulty in reading.wordwrapFilters and flexible conditional statements allow us to easily implement an intelligent text wrapping strategy.

KnowwordwrapFilter: The intelligent butler for long texts.

wordwrapThe filter is a very practical feature in AnQiCMS template engine, mainly used to automatically add line breaks to long text based on the specified length.This is like setting a width limit for text, once the length of the text reaches this limit, it will automatically start a new line.

UsewordwrapIt is very direct, just apply it to the text variable to be processed and provide a number as the line break length parameter. For example:

{{ article.Content|wordwrap:30 }}

This line of code willarticle.ContentThe text, try to wrap every 30 characters. It is worth noting that,wordwrapThe filter will prioritize spaces between words when performing line breaks. This means that if your text is a continuous non-English content (such as a paragraph without punctuation marks, for example, Chinese without punctuation).wordwrapIt may not force line breaks between Chinese characters because it cannot find spaces between 'words'. Therefore, special attention should be paid to the line break effect when processing continuous texts like Chinese.

If you wish to bewordwrapThe processed text can truly be displayed as multiline on the page, it usually also requires combining CSS styles or another related filter in AnQiCMS templatelinebreaksbr.linebreaksbrThe text's newline characters will be converted to HTML.<br />Tags, so that the browser can render the line breaks correctly. For example:

<p>{{ article.Description|wordwrap:50|linebreaksbr|safe }}</p>

Here we also usedsafeFilters to ensure that bylinebreaksbrgenerated<br />Labels can be parsed by the browser instead of being displayed as plain text.

Flexible use of conditional judgment: making text display more intelligent

Conditional judgment statements in AnQiCMS templates (if/elif/elseEnglish provided powerful logical control capabilities, allowing us to decide the display of content based on different conditions. This is very similar to conditional branches in programming languages, and the syntax is also very intuitive:

{% if condition1 %}
    <!-- 当condition1为真时显示的内容 -->
{% elif condition2 %}
    <!-- 当condition1为假，condition2为真时显示的内容 -->
{% else %}
    <!-- 以上条件都为假时显示的内容 -->
{% endif %}

These conditions allow us to check the length of text, whether a variable exists or meets certain numerical values, etc., thereby achieving more refined template logic. For example, we can use{{ some_variable|length }}Get the text length, as the basis for conditional judgment.

wordwrapIn conjunction with conditional judgment: realize dynamic line break

towordwrapThe filter combined with conditional judgment allows us to achieve various complex text wrapping requirements, making the display of web content more dynamic and intelligent.

Scene one: Break lines as needed to avoid excessive formatting

Not all text needs to be forced to break lines, sometimes it only needs to be broken when the text is too longwordwrapProcess. By using conditional judgment, we can easily achieve this.

Suppose we want to wrap a summary text when it exceeds 100 characters, otherwise keep it as is:

{% if article.Description|length > 100 %}
    <p>{{ article.Description|wordwrap:50|linebreaksbr|safe }}</p>
{% else %}
    <p>{{ article.Description|safe }}</p>
{% endif %}

This code first checksarticle.Descriptionthe length. If it exceeds 100, then applywordwrapthe filter to wrap the text every 50 characters and convert it to HTML<br />tags; otherwise, display the original text directly.

Scene two: Different line break strategies under different situations

In different areas of the website or for different types of devices, we may need different line break lengths.For example, on the article list page, line breaks may need to be more dense to save space; while on the detail page, line breaks can be set more loosely for a better reading experience.

Here, the text content's characteristics or the page context can be combined to decide:

{% if page_type == "list" %}
    {# 在列表页，文本长度更短，换行也更密集 #}
    <p>{{ article.Title|wordwrap:20|linebreaksbr|safe }}</p>
{% elif page_type == "detail" %}
    {# 在详情页，允许更长的单行文本 #}
    <p>{{ article.Description|wordwrap:60|linebreaksbr|safe }}</p>
{% else %}
    {# 默认情况 #}
    <p>{{ article.Description|safe }}</p>
{% endif %}

Here are thepage_typeis a hypothetical template variable, you can define it according to the actual template context or through URL parameters, etc.

Scenario three: special handling for specific content types

Taking into considerationwordwrapFor non-English continuous text characteristics, if your website contains multiple language content, or if you have special requirements for line breaks in Chinese content, you can use conditional judgment to avoid unnecessary processing.

For example, if you can judge that the current content is Chinese and you do not wantwordwrapTo break the continuity of Chinese, you can design it like this:

{% if current_language == "en" and long_text|length > 80 %}
    {# 仅对英文长文本进行wordwrap处理 #}
    <p>{{ long_text|wordwrap:40|linebreaksbr|safe }}</p>
{% else %}
    {# 其他语言或短文本，保持原样 #}
    <p>{{ long_text|safe }}</p>
{% endif %}

Here are thecurrent_languageIt is also a variable indicating a hypothetical language. If such a variable does not exist, it can be considered to judge a specific content model or field.

Practical suggestions and precautions.

  • Test first:In practical applicationswordwrapWhen combined with conditional judgment, it is necessary to perform sufficient testing on different browsers and devices to ensure that the display effect meets expectations.
  • 兼顾可读性：Short line breaks can lead to text fragmentation, affecting reading experience; too long line breaks may not achieve the layout purpose. Choosing the appropriate line break length is crucial.
  • English：For more refined text layout control, such as word wrapping (word-break)、overflow wrapping (overflow-wrapEnglish, can be combined with CSS style sheets to implement, the template is only responsible for the preliminary processing of data.
  • Performance considerationsAlthough the template engine is very efficient, when dealing with a large amount of long text and complex conditions, it is still necessary to avoid overly complex nesting logic to ensure the page loading speed.

By reasonably utilizing the AnQiCMS providedwordwrapFilters and condition judgments enable us to provide visitors of the website with a cleaner and more readable text display, effectively improving the overall user experience.

Common Questions (FAQ)

  1. wordwrapHow does the filter handle line breaks for continuous non-English text like Chinese? wordwrapFilter is mainly based on spaces to identify words and to perform line breaks.For Chinese text such as this continuous text without spaces, it usually does not automatically insert line breaks between the characters.word-breakOr JavaScript and other front-end technologies, or through other custom ways in AnQiCMS templates.

  2. How towordwrapWhether the processed text actually displays line breaks? wordwrapThe filter will insert line breaks within the text (\n），but HTML browsers do not render these newline characters visually by default. To display them as multiple lines, you usually need to wrap the processed text content in<pre>Labels, or a more common and flexible approach is to,wordwrapFilter is related tolinebreaksbrChaining filters, for example,{{ text|wordwrap:50|linebreaksbr|safe }}.linebreaksbrIt will\nConverted to HTML,<br />Tags, thus achieving line break effects.

  3. How can I use other conditions to determine whether to applywordwrapor adjust its parameters?In addition to text length, you can use any variables or expressions available in the AnQiCMS template as a condition. For example, you can use:

    • Page typeFor example:{% if page_type == 'sidebar' %}In the sidebar, shorter line breaks are displayed.
    • Content ModelFor example:{% if archive.ModuleId == 1 %}Apply different line break rules to the article model and product model.
    • Custom field value: If your content model has custom fields (such as archive.DisplayMode），can be adjusted according to its value to change the line strategy.
    • User permissions or language settingsAlthough these variables are not directly mentioned in the document, they can also be used as a basis for judgment if the template context provides this information.

Hope this information helps you better implement flexible text wrapping in AnQiCMS.