In the template development of AnQi CMS, flexibly handling and displaying text content is the key to improving user experience and the aesthetic beauty of the website. Where,wordwrapandtruncatecharsThese two filters are related to text length control, but they have completely different focuses and use cases.Understanding the core differences between these two can help us more accurately meet our content display needs.

truncatecharsFilter: a powerful tool for truncating text.

truncatecharsFilter, as the name implies, its main function is to "truncate characters".It comes in handy when you need to shorten a piece of text to a specified number of characters....），to indicate that the content has not been fully displayed.

Its core goal is:Strictly control the total length of text, and use ellipses to clearly inform the reader that the content has been shortened.

Typical application scenarios include:

  • Article summary/introduction:On the homepage, list page, or recommendation module, we usually want to display a brief overview of the article, which can attract users without taking up too much space.
  • SEO's Meta Description：In Search Engine Optimization, the length of Meta Description is limited, usingtruncatecharsEnsure that the description content does not exceed the maximum length.
  • Title or description of card layout:Ensure that titles or descriptions of different lengths are displayed consistently in the card to maintain visual tidiness.

For example, if you have a text “AnQi CMS is an enterprise-level content management system developed based on Go language, dedicated to providing efficient, customizable, and easily scalable content management solutions.” and you want to truncate it to 20 characters:

{{ "安企CMS是一个基于Go语言开发的企业级内容管理系统，致力于提供高效、可定制、易扩展的内容管理解决方案。"|truncatechars:20 }}

输出结果可能是：“English CMS is a CMS based on Go language…”

It is worth mentioning that when dealing with text containing HTML tags, it is advisable to usetruncatechars_htmla filter. It works withtruncatecharsFunctionally similar, but it can intelligently parse HTML tags, ensuring that the original HTML structure is not destroyed during truncation, such as avoiding unclosed tags, thus maintaining the validity of the page.

wordwrapFilter: The art of line breaking

Withtruncatecharsis different from the "truncate".wordwrapThe core function of the filter is "line spacing".It does not delete any content of the text, but intelligently inserts line breaks in the text according to the maximum length per line you set.The purpose is to make long text better adapt to narrow container widths when displayed, thereby improving the overall readability of the text.

Its core goal is:Optimize the display layout of text without losing any content, by inserting line breaks to limit the length of each line.

Typical application scenarios include:

  • Fixed-width text block:For example, in the sidebar, code example area, or comment section, the text content may be long, but the display area is limited.wordwrapIt can ensure that text will not overflow but will be wrapped automatically.
  • Improve the readability of long sentences:Especially on mobile or small screen devices, breaking long sentences into shorter lines helps users read.

wordwrapThe filter will break lines between words to maintain word integrity during execution. However, if the length of a single word exceeds the set threshold,wordwrapThe filter will still force a break within words to ensure that each line does not exceed the specified length.

For example, if you have a long English sentence like “Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.” and you want each line to be no more than 15 characters:

<pre>{{ "Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua."|wordwrap:15 }}</pre>

Output result (assuming inpretags, retain the formatting):

Lorem ipsum
dolor sit
amet,
consectetur
adipisici
elit, sed
eiusmod
tempor
incidunt ut
labore et
dolore magna
aliqua.

As you can see, all the content is retained, but it has been reformatted into multiple lines.

Core Differences and Selection Guide

The fundamental difference lies in their goals and approaches:

  • truncatecharsFocuses on:Length limit of text contentIt is translated as 'English'.
  • wordwrapFocuses on:Text display formatting。Its result is “complete content + newline”, implying that the content is complete without any missing parts, but is presented better within limited space. It focuses on the length of each line.

When to choosetruncatechars?when you need:

  1. Strictly control the number of characters displayed in content, for example, for preview, abstract, or uniform list item length.
  2. Clearly inform the user that more content is not displayed (through ellipses).
  3. Friendly to search engine Meta Description and others.

When to choosewordwrap?when you need:

  1. Display complete and longer text content within a fixed-width container.
  2. Through automatic line wrapping, optimize the reading experience and make the text easier to browse.
  3. Ensure that all original content is preserved and there is no loss of information.

In the template creation of AnQi CMS, flexibly using these two filters can help us manage and display website text content more effectively, thereby providing users with a better browsing experience.According to specific business requirements and design goals, choosing the appropriate filter is an important part of fine-grained content operation.

Common Questions (FAQ)

1.truncatecharsandtruncatewordsWhat are the differences? How should I choose? truncatecharsIt is truncated based on the number of characters. It starts counting from the beginning, including Chinese, English, symbols, and all are counted as one character.truncatewordsIt is truncated based on the number of words, using spaces or other delimiters as word boundaries. Choose it if you need to precisely control the total number of characters (such as to meet fixed pixel width or SEO character limits), please usetruncatecharsIf your content is in English and you want to truncate it while maintaining word integrity, so that no word is displayed halfway.truncatewordsIt would be a better choice. For Chinese content, since Chinese does not have the concept of 'words',truncatecharsit is usually more appropriate.

2.wordwrapWould the filter destroy the HTML structure? wordwrapFilter itself mainly processes plain text content, inserting line breaks in the text. If your text contains HTML tags and within the tags (for example,<h1>这是一个很长很长很长的标题</h1>) applicationwordwrapIt may insert line breaks within the title text, which usually will not破坏结构 in HTML rendering, but will affect the continuity of the text. To avoid unexpected situations, it is usually recommended to process plain text output or<pre>Such preformatted labels are used insidewordwrapor within the applicationwordwrapfirst usestriptagsRemove HTML tags.

3. I can use the same variable at the same time.wordwrapandtruncatecharsFilter?English. Filters are chained, and you can combine them for use. For example, you can use them first by:truncatecharsTruncate text to a certain length and add an ellipsis, and then apply this truncated text towordwrapa newline to adapt to a smaller display area. However, it is important to note,The execution order of the filters is very importantBecause the output of the previous filter will be the input for the next filter. For example:{{ my_text|truncatechars:100|wordwrap:30 }}Will first truncate the text to 100 characters, then wrap each 30 characters into a new line.{{ my_text|wordwrap:30|truncatechars:100 }}English: The text will be wrapped first, and then truncated to 100 characters in total.The former is usually more common, as we often want to control the overall length first before considering the internal layout.