In website content management, especially when dealing with article lists, product displays, or news summaries, long titles often become a significant challenge.They may exceed the preset container, destroy the page layout, affect the overall aesthetics, and even reduce the user experience.AnQiCMS (AnQiCMS) provides a powerful template engine, among whichwordwrapThe filter is an elegant and simple solution to solve such problems.

In AnQi CMSwordwrapIntroduction to filters

wordwrapThe filter is a practical text processing tool in the AnQiCMS template engine, its main function is to intelligently insert line breaks in long texts according to the specified length.This can effectively avoid text overflow in containers, helping you present titles or other text content in a more friendly manner.Through its processing, even long titles can be neatly 'folded' up, maintaining the page layout.

When and why to usewordwrap?

In the actual operation of websites, there are many scenarios that prompt us to consider usingwordwrapFilter:

  • List or card view layout:When you display titles in article lists, product cards, or news summary modules, if the title text is too long, it is easy to burst the preset container, causing content overlap or layout confusion. UsewordwrapEnsure that the title wraps automatically at a certain length to maintain the overall layout balance and aesthetics.
  • Responsive design optimization:On mobile devices, the screen width is limited, and long titles are more likely to cause display issues.wordwrapCan help the title automatically adjust on small screens, avoiding the embarrassing situation of horizontal scroll bars or truncated text, and improving the reading experience for mobile users.
  • Improve user experience:The layout of the page content directly affects the user's reading experience. Uniform title display not only makes the page look more professional but also allows users to browse information more easily, improving the usability of the website.

In summary,wordwrapThe filter provides you with a flexible display control method without changing the original title content, making the page content more readable and visually attractive.

wordwrapThe working principle and characteristics of the filter

wordwrapThe filter mechanism is relatively intuitive: it traverses the input text and attempts to insert a line break at the character count you set.

However, it is crucial to understand one of its important characteristics, especially for Chinese users:wordwrapThe filter is mainlydependent on spaces to identify 'words'This means that for English words separated by spaces, it will wrap at the nearest space to ensure the integrity of the word.

For continuous Chinese textDue to the lack of spacing between characters,wordwrapThe filter does not force a line break between words but treats the entire Chinese paragraph as an indivisible 'word'. For example, if a Chinese title is 'AnQi CMS Content Management System Strong Function Analysis', even if you changewordwrapThe length is set to 5, and it will not wrap between "Content" and "Management", but will treat the entire title as a single line because it cannot find a breakable space.

Therefore, when usingwordwrapWhen dealing with Chinese titles, you will find that they do not automatically break in the middle of the text, which is different from the effect when dealing with English text. For long Chinese titles,wordwrapThe effect may not be as expected, it may be necessary to combine other methods (such as CSS'stext-overflow: ellipsisor backend truncation processing) to achieve the effect.

How to apply in AnQiCMS templatewordwrap

Apply in AnQiCMS templatewordwrapThe filter is very simple, you just need to find the long title variable you need to process, and then use the pipe character|and connect it withwordwrapthe filter, and specify the line break length you want.

usually,you would go througharchiveDetailtag or inarchiveListto get the title of the article (or product) in a loop, for example{{ archive.Title }}.

The basic application syntax is as follows:

{{ 变量名 | wordwrap: 长度 }}

Assume you want a long title to wrap automatically when it exceeds 25 characters, you can write it like this in the template:

{# 示例：在一个文章列表中应用wordwrap过滤器 #}
{% archiveList archives with type="list" limit="10" %}
    {% for item in archives %}
    <div class="article-card">
        <h3 class="article-title">
            <a href="{{ item.Link }}">
                {# 应用 wordwrap 过滤器，标题在超过25个字符时尝试换行 #}
                {{ item.Title | wordwrap: 25 }}
            </a>
        </h3>
        <p class="article-description">{{ item.Description | truncatechars: 100 }}</p>
    </div>
    {% endfor %}
{% endarchiveList %}

In the above example,item.TitleIt is the long title variable you need to process.wordwrap: 25This indicates that you want the title to wrap at around 25 characters.

If your title is in English and contains spaces, for example “AnQiCMS is a powerful content management system built with Go language.”, when you setwordwrap: 20It may be displayed as:

AnQiCMS is a powerful
content management system
built with Go language.

But if the title is Chinese, for example, 'AnQi CMS is a powerful content management system based on the Go programming language', even if you have setwordwrap: 20It will still be displayed as:

安企CMS是一个基于Go语言开发的强大内容管理系统

Because the Chinese continuous text does not have spaces,wordwrapCannot find a suitable line break point.

Example of practical application scenarios

Consider a news block on a website homepage, each news entry has a title. To maintain consistent card height and prevent the title from stretching the card, we can usewordwrapfilter.

<div class="news-list-container">
    {% archiveList newsItems with type="list" categoryId="1" limit="5" %}
        {% for item in newsItems %}
        <div class="news-card">
            <a href="{{ item.Link }}" class="news-link">
                <h4 class="news-title">
                    {# 将新闻标题限制在约30个字符内换行 #}
                    {{ item.Title | wordwrap: 30 }}
                </h4>
                <p class="news-summary">
                    {{ item.Description | truncatechars: 80 }}
                </p>
                <span class="news-date">{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
            </a>
        </div>
        {% empty %}
        <p>暂无新闻内容。</p>
        {% endfor %}
    {% endarchiveList %}
</div>

In this example,news-titlecategories<h4>The title within the tag will automatically wrap after more than 30 characters (including spaces) to maintain a uniform visual effect for the news card.

Points to note

While usingwordwrapRemember these points when filtering:

  • Features of Chinese text:Emphasize again,wordwrapWhen processing continuous Chinese text without spaces, it will not automatically wrap. For the line break needs of Chinese titles, you may need to consider other solutions, such as manual sentence breaks during backend content publishing, or combining CSS'stext-overflow: ellipsis(Show ellipsis) to handle overflow text.
  • Test different lengths:Different layouts and font sizes, the line break length of **is also different. It is recommended to test different ones in the actual environment.长度Value to find the best visual effect for your website design.
  • Combined with CSS overflow control: wordwrapThe insertion is an actual newline character, which makes the text occupy multiple lines. If you want the text to be displayed on one line and an ellipsis to be shown when it overflows, then CSS'swhite-space: nowrap; overflow: hidden; text-overflow: ellipsis;it would be a more suitable choice.wordwrapAnd CSS overflow control is a tool to solve different layout problems, and it can be flexibly selected according to specific needs.

By flexibly using the AnQiCMS providedwordwrapFilter, you will be able to manage the display of website content more effectively, providing visitors with a more professional, easy-to-read browsing experience.

Frequently Asked Questions (FAQ)

1.wordwrapCan the filter implement automatic line breaks in Chinese titles?

Answer: wordwrapThe filter mainly relies on spaces to identify words and insert line breaks. For continuous Chinese text, since there are no spaces between characters,wordwrapThe filter will not automatically break and wrap words in the middle. It will