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.wordwrapFilter is an elegant and simple solution to solve such problems.
In the Anqi CMSwordwrapFilter introduction
wordwrapThe filter is a practical text processing tool in the AnQiCMS template engine, which mainly serves to intelligently insert line breaks in long texts according to the length you specify.This can effectively avoid text overflow in the container and help you present titles or other text content in a more user-friendly manner within limited space.Through its processing, even lengthy titles can be neatly 'folded' and maintain 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 displaying titles in modules such as article lists, product cards, or news summaries, if the title text is too long, it is easy to burst the preset container, causing content overlap or layout disorder. Use
wordwrapCan ensure that the title wraps automatically after reaching a certain length, thus maintaining the overall layout balance and aesthetics. - Responsive design optimization:On mobile devices, the screen width is limited, and overly long titles are more likely to cause display issues.
wordwrapThe title can automatically adjust on small screens to avoid horizontal scroll bars or the awkward situation of text being cut off, enhancing the reading experience for mobile users. - Enhance user experience:The layout of page content directly affects the reading experience of users.Uniform title display, not only makes the page look more professional, but also makes it easier for users to browse information and improves the usability of the website.
In short,wordwrapThe filter provides a flexible means of display control without altering the original title content, making the page content more readable and visually attractive.
wordwrapThe working principle and characteristics of the filter
wordwrapThe working mechanism of the filter is relatively intuitive: it will traverse the input text and try to insert a line break at every character count you set\n).
However, understanding one of its important characteristics is crucial, especially for Chinese users:wordwrapThe filter mainlydepends on spaces to identify 'words'This means that for English words separated by spaces, it will prefer to break the line at the nearest space after reaching the specified length to ensure the integrity of the word.
For continuous Chinese text, as there is no space between characters,wordwrapThe filter will not force line breaks between characters but treats the entire Chinese paragraph as an indivisible 'word' for processing. For example, if a Chinese title is 'Anqi CMS Content Management System Powerful Function Analysis', even if you willwordwrapThe length is set to 5, and it will not wrap between "Content" and "Management". Instead, it treats the entire title as a single line because it cannot find any space to break.
Therefore, when usingwordwrapWhen processing Chinese titles, you will find that they do not automatically break in the middle of the text, which is different from the effect when processing English text. For long Chinese titles,wordwrapThe effect may not be as expected, it may be necessary to combine with other methods (such as CSS'stext-overflow: ellipsisor backend truncation processing) to achieve the effect.
How to apply in AnQiCMS templatewordwrap
Apply in AnQiCMS templateswordwrapThe filter is very simple, you just need to find the long title variable that needs to be processed, and then use the pipe symbol|to connect it withwordwrapthe filter, and specify the line break length you want.
通常，You will usuallyarchiveDetaillabels orarchiveListto obtain the title of articles (or products) in a loop, for example{{ archive.Title }}.
The basic application syntax is as follows:
{{ 变量名 | wordwrap: 长度 }}
If 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 handle.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 in Chinese, for example “Anqi CMS is a powerful content management system developed based on Go language”, even if you have setwordwrap: 20It will still display as:
安企CMS是一个基于Go语言开发的强大内容管理系统
Because Chinese continuous text does not have spaces,wordwrapit is not possible to find a suitable line break point.
Example of practical application scenarios
Consider a website homepage news block, each news item has a title. To maintain the consistent height of the card and prevent the title from being too long and 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 label will automatically wrap after more than 30 characters (if it includes spaces) to keep the visual effect of the news card consistent.
Precautions
When usingwordwrapFiltering, please remember the following points:
- Characteristics of Chinese text:[en]Again, I emphasize,
wordwrapIn handling continuous Chinese text without spaces, automatic line breaks will not be applied. For line break requirements of Chinese titles, you may need to consider other solutions, such as manual segmentation during content publishing on the backend, or combining with CSS'stext-overflow: ellipsis... (ellipsis) to handle overflow text. - Test different lengths:Different layouts and font sizes, the line breaks of **are also different. It is recommended to test different ones in the actual environment.
长度Value, to find the most suitable visual effects for your website design. - Combined with CSS overflow control:
wordwrapThe inserted content is an actual newline character, which will cause the text to occupy multiple lines. If you want the text to be displayed on one line with an ellipsis for the overflow, then CSS is a more suitable choice.white-space: nowrap; overflow: hidden; text-overflow: ellipsis;would be a better choice.wordwrapauto
autowordwrapFilter, you will be able to manage the display of website content more effectively, providing visitors with a more professional and easy-to-read browsing experience.
Common Questions (FAQ)
1.wordwrapFilter can the effect of automatic line break in Chinese titles be achieved?
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 lines in the middle of words. It will