So Outside Technology Security CMS
AnQiCMS
Online Demonstration

How does the `truncatechars_html` filter precisely control the character truncation length of HTML content?

Calendar 👁️ 62

In website operation, how to effectively display content is an eternal topic.We hope users can quickly browse information, while being attracted by the exciting summary, and then click to view the full text.However, when the original content is long and contains complex HTML structures, how to elegantly truncate it has become a challenge that template designers and content operators often encounter.

crudely truncating a section of text with HTML tags based on character count may destroy the original HTML structure. Imagine you have a summary of an article with bold, link, or even image tags, and if you simply truncate it halfway through<b>Label, the result is a chaotic page layout, even causing the entire page style to be disordered, significantly reducing the user experience. AnQiCMS (AnQiCMS) knows this pain point, and therefore provides powerful content processing filters in the template engine, among whichtruncatechars_htmlIt is a powerful tool for extracting HTML rich text content, which can accurately control the display length of the content while ensuring the beauty of the page and the integrity of the code.

The intelligent solution of AnQi CMS:truncatechars_html

truncatechars_htmlThe core value of the filter lies in its "HTML-aware" extraction capability. It does not shear blindly like ordinary string extraction, but intelligently parses HTML content, ensuring that all HTML tags opened before the extraction point (such as<div>/<span>/<a>/<b>All) can be closed correctly. This completely avoids HTML structure damage and display anomalies caused by incorrect truncation.

Usetruncatechars_htmlVery direct. You just need to apply it to the variable you want to extract in the template:

{{ obj|truncatechars_html:number }}

HereobjIt is the variable containing the HTML content you want to process,numberThis is the total length of the characters you expect. It is noteworthy that, thisnumberIt includes the ellipsis automatically added by the filter after truncation (...The characters occupied. The filter only counts visible text characters when calculating length, HTML tags themselves are not included, which ensures that the accuracy of the截取 conforms to our intuitive expectations.

For example, assume you have a description that includes HTML:

<p><b>这是一段包含HTML标签的示例文本</b>，我们希望它能够被精确截取。</p>

If you want to truncate it to 15 visible characters:

{{ '<p><b>这是一段包含HTML标签的示例文本</b>，我们希望它能够被精确截取。</p>'|truncatechars_html:15 }}

The resulting output might be:

<p><b>这是一段包含HTML...</b></p>

It can be seen that although the original text is truncated in the middle,<b>and<p>the tags are closed correctly, ensuring the validity of HTML and that the style will not be affected.

not onlytruncatechars_html: More options for Anqi CMS

AnQi CMS provides a variety of excerpt filters to meet different content types and display requirements, understanding the differences can help you choose the appropriate tools more flexibly:

  1. truncatecharsIf you are dealing with plain text content that does not contain any HTML tags, thentruncatecharsThe filter will be your ideal choice. It will truncate strings by character count and add an ellipsis at the end.It does not consider HTML structure, therefore it is not suitable for rich text content.

    {{ '这是一段纯文本内容，将被截取。'|truncatechars:10 }}
{# 输出: 这是一段纯... #}

  2. truncatewordsSometimes we prefer to cut by words instead of characters to ensure that the cut content is semantically complete. For plain text content,truncatewordsIt can be put into use. It will cut by words to avoid cutting a word in half.

    {{ 'This is a long sentence for truncation.'|truncatewords:4 }}
{# 输出: This is a long ... #}

  3. truncatewords_htmlSimilarly, when your HTML content needs to be split by words while also ensuring that the HTML structure is not destroyed,truncatewords_htmlit is the best choice. It combinestruncatewordsthe integrity of words withtruncatechars_htmlThe HTML security.

    {{ '<div><b>This</b> is a <em>sample</em> text.</div>'|truncatewords_html:3 }}
{# 输出: <div><b>This</b> is a...</div> #}

By flexible applicationtruncatechars_htmlAnd other extraction filters, you can easily handle content display needs in different scenarios.Whether it is to generate a beautiful abstract for an article list or to provide a concise preview for a product introduction, Anqi CMS provides powerful and easy-to-use tools to make your website content more professional and efficient.

Frequently Asked Questions (FAQ)

1.truncatecharsandtruncatechars_htmlWhat is the core difference?

The core difference lies in the way HTML content is handled.truncatecharsIt is designed for plain text, it will simply truncate by the number of characters, without concerning whether the content contains HTML tags, if truncated in the middle of a tag, it will cause damage to the HTML structure. Andtruncatechars_htmlIt is tailor-made for rich HTML text, which intelligently identifies and closes unclosed HTML tags when extracted, ensuring that the extracted content is still valid HTML and does not disrupt the page layout.

2.truncatechars_htmlWhen calculating the character length, will the HTML tags be counted as well?

No.truncatechars_htmlCalculatingnumberWhen the character length specified by the parameter is only calculated for visible text content, the characters of the HTML tag itself (such as<p>/<b>This is not counted in the total length. This allows us to more intuitively control the length of the text that the user actually sees.

3. If my content is too short, it does not reachtruncatechars_htmlThe set length will also show an ellipsis (...) right?

It will not. Only when the visible character length of the original content exceeds thenumberthen,truncatechars_htmlwill it be truncated and an ellipsis added. If the original content is already longer thannumberShort (or exactly equal tonumber), it will be output as is without ellipsis.

Related articles

How to extract the HTML content rendered from Markdown without destroying the tag structure?

In content operation, we often encounter such needs: on a list page of articles or a special topic page, it is necessary to display the summary content of the articles.These articles are usually written using a Markdown editor, which may contain images, links, bold text, and other rich HTML structures.If simply truncating the HTML string rendered by Markdown, it often breaks the original tag structure, causing the page layout to become chaotic, even resulting in unclosed tags, which seriously affects the user experience.AnQi CMS as an efficient

2025-11-08

How to automatically generate an article table of contents (TOC) based on Markdown content?

How to effectively organize the structure of long articles while managing website content with Anqi CMS, which is a worthy issue to pay attention to.Automatically generate an article table of contents (Table of Contents, abbreviated as TOC) is a very practical solution.It not only allows readers to quickly understand the outline of the article, but also makes it convenient for them to jump to the parts of interest, while also helping search engines better understand the structure of the article.

2025-11-08

How to implement syntax highlighting for code blocks in Markdown content rendered to HTML?

In Anqi CMS, managing content, especially documents containing code, you may want to display code blocks in a beautiful and easy-to-read manner, which usually requires syntax highlighting.Markdown is a lightweight markup language that makes content creation simple and efficient, and the built-in Markdown editor of Anqí CMS is even more powerful.How can code blocks in Markdown content be syntax highlighted when rendered into HTML?

2025-11-08

Does AnQiCMS support the configuration of a custom Markdown renderer?

In the daily operation of AnQiCMS, we often encounter refined needs for content presentation, especially for those who are accustomed to writing content in Markdown, it is natural to be concerned about whether the system supports the configuration of custom Markdown renderers.In fact, Markdown, with its concise and efficient features, has become the preferred choice for many content creators.From the design philosophy of AnQi CMS, it is committed to providing an efficient, customizable, and easy-to-expand content management solution.

2025-11-08

How to safely truncate a Markdown-rendered HTML content by words?

In content operation, we often need to display a brief version of the content on list pages, aggregation pages, or article summary areas.This not only optimizes the page layout and improves user experience, but also helps search engines better understand the content theme to some extent.However, when content is written in Markdown format and finally rendered as HTML, if you need to truncate it, you may encounter some challenges.It is easy to truncate HTML content by characters or bytes, which can easily lead to incomplete tags, disordered page structure, and even display errors.

2025-11-08

How to remove all or specified HTML tags from the HTML content rendered from Markdown?

When managing content in Anqi CMS, we often use the Markdown editor to conveniently write articles.The power of Markdown lies in its ability to convert simple plain text format into rich HTML structure, which brings great convenience to the style and expressiveness of content.But sometimes, we do not need or do not want these HTML tags to be completely displayed on the final page.

2025-11-08

How to convert newline characters to `<br/>` in Markdown rendered plain text content?

In website content management, we often encounter such a situation: after hard work in the background editor, we press the enter key between each line of text, hoping that they will maintain the same line break effect on the front page.However, after the content was published, it was found that all the line breaks had disappeared and the text was squeezed into a ball.This is because web browsers default to treating consecutive newline characters as a single space and do not automatically convert them into visually apparent line breaks.For friends using AnQiCMS, solving this problem is actually very simple and elegant

2025-11-08

How does the `urlize` filter automatically recognize and beautify URL links in Markdown content?

In daily content creation and website operation, we often need to cite external resources or provide links to more information.It takes time and is prone to errors to manually convert these links into clickable hyperlinks, especially when dealing with large amounts of content or Markdown-formatted text.AnQiCMS (AnQiCMS) understands the pain points of content operation, providing us with an elegant solution through its powerful template filter function - the `urlize` filter, which can automatically identify and beautify URL links in Markdown content.

2025-11-08