When operating a website, we often encounter situations where we need to display long content, but the page space is limited.For example, on the article list page, we usually only want to display the summary of the article;On the product detail card, you may only want to display a brief description.If these contents are not processed, they may overflow the container, destroy the page layout, and affect the user experience.

AnQi CMS understands the importance of content display and provides us with powerful template functions. Among them,truncatechars/truncatewords_htmlThe filter is a tool to solve the problem of content truncation. It can help us elegantly control the display length of text or HTML content, and automatically add beautiful ellipses when the content is truncated, keeping the website interface neat and professional.

We will now take a detailed look at these practical content truncation filters and their applications.

Truncation processing of plain text content:truncatecharsandtruncatewords

When we need to truncate is pure text content, not containing any HTML tagstruncatecharsandtruncatewordsis our preference.

Truncate by character:truncatechars

truncatecharsThe filter allows us to specify a character number, the content will be truncated based on this character number. It should be noted that it will add an ellipsis at the truncation position....), and these three ellipses will also be counted in the total character count set by you.

Usage example:Assuming we have a brief introduction to an article: "Joel is a slug that likes to write about AnQiCMS.", we hope it displays no more than 9 characters.

{{ "Joel is a slug"|truncatechars:9 }}

Display result: Joel i...

As you can see,Joel is aWith the ellipses included, it is exactly 9 characters long.truncatecharsIt is very suitable for precise character length control of short plain text (such as titles, tags).

Truncate by word:truncatewords

If the content of your text is English or separated by spaces, and you would prefer to truncate by word to avoid cutting off half a word, thentruncatewordsIt would be a better choice. It will truncate at the nearest word boundary and also add ellipses at the end, which are also counted in the word count.

Usage example:We have a long English description: 'This is a long test which will be cutted after some words.', and we hope it shows no more than 5 words.

{{ "This is a long test which will be cutted after some words."|truncatewords:5 }}

Display result: This is a long test ...

This ensures the integrity of each word, making it more in line with the reading habits of natural language.

Truncation processing of HTML content:truncatechars_htmlandtruncatewords_html

directlytruncatecharsortruncatewordsWhen processing content containing HTML tags, problems may occur. For example, if the content is in<div>truncated inside the tag, but</div>Tags that are not included will cause the page HTML structure to be chaotic, the style to be disordered, and even the function to be abnormal.

To solve this problem, Anqi CMS provides two special filters for handling HTML content: truncatechars_htmlandtruncatewords_htmlThey will smartly close all unclosed HTML tags while truncating content, ensuring the integrity of the page structure.

Truncate HTML by character:truncatechars_html

truncatechars_htmlLet us truncate HTML content by character count and ensure all HTML tags are properly closed. It also adds an ellipsis and counts it in the character count.

Usage example:We have a paragraph with HTML tags:“<p class='test' id='foo'>This is a long test which will be cutted after some chars.</p>”, we hope it displays no more than 25 characters.

{{ "<p class='test' id='foo'>This is a long test which will be cutted after some chars.</p>"|truncatechars_html:25 }}

Display result: <p class='test' id='foo'>This is a long test wh...</p>

You can see, even if the truncation position is inwhichIn the middle, the filter also automatically closes for us<p>Tags ensure that the HTML structure of the page is not destroyed

Split HTML by word:truncatewords_html

Similarly,truncatewords_htmlEnsure that when truncating HTML content by word, the integrity of the tags is also maintained. It will truncate at the nearest word boundary and close the tags correctly.

Usage example:We have a piece of HTML content: “<p>This is a long test which will be cutted after some words.</p>”，we want it to display no more than 2 words.

{{ "<p>This is a long test which will be cutted after some words.</p>"|truncatewords_html:2 }}

Display result: <p>This is ...</p>

By this filter, we can truncate HTML content while maintaining semantic integrity (by word) and ensuring structural safety.

Actual application suggestions

These content truncation filters are very useful in Anqi CMS in many scenarios:

  • Article list/News list:You can use them when displaying article titles and summaries:truncatecharsortruncatewordsUnify the length of the introduction to keep the list neat.
  • Product/Service Display:If the product description contains rich HTML formatting, but needs to display an abstract in card or list view,truncatechars_htmlortruncatewords_htmlCan perform perfectly, retaining the format and controlling the length.
  • User comment/leave a message preview:These filters can also be used when displaying the summary of user comments on the backend or frontend.
  • Multi-site content synchronization:If you use the multi-site management function of Anqi CMS, to synchronize content summaries between different sites, these filters can also help you ensure consistency in display.

When choosing which filter to use, the key is whether the content you are handling is plain text or contains HTML, and whether you prefer to control it precisely by character or by word to maintain semantic integrity.In any case, it is recommended that you thoroughly test the content before applying it to a production environment to ensure that it displays as expected.

By flexibly using these content truncation filters provided by Anqi CMS, we can not only enhance the visual aesthetics of the website but also optimize the user experience, allowing users to efficiently obtain core information within limited page space.

Frequently Asked Questions (FAQ)

  1. The number parameter (for exampletruncatechars:9of9) refers to what?This number parameter refers to the maximum length of content you want to display. Fortruncatecharsandtruncatechars_html, it refers to the maximum number of characters; fortruncatewordsandtruncatewords_htmlIt refers to the maximum number of words. It is worth noting that if the content is truncated and an ellipsis is added (...), these three ellipses will also be counted in the total length you set.

  2. What if I cut off the content and don't want the ellipsis to be displayed?The built-in of AnQi CMStruncatechars/truncatewords/truncatechars_htmlandtruncatewords_htmlThe filter will automatically add an ellipsis when the content is truncated.Currently, these filters do not provide an option to disable the display of ellipses.If you have special requirements, you may need to consider customizing a filter to achieve this functionality, but this goes beyond the scope of this article.

  3. When dealing with content containing HTML tags, should I prioritize choosing?truncatechars_htmlOrtruncatechars?It is strongly recommended to use when your content contains any HTML tagstruncatechars_htmlortruncatewords_html. This is because the conventionaltruncatecharsortruncatewordsThe filter will only truncate as plain text, which may truncate content in the middle of tags, causing HTML structure damage and thus affecting page layout and display. And it includes_htmlThe suffix filter will intelligently identify and correctly close incomplete HTML tags, ensuring the integrity of the page structure.