How to effectively display content in website operation is an eternal topic.We hope users can quickly browse the 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 reduce it has become a common challenge that template designers and content operators often encounter.

Simple and粗暴地根据字符数截取一段带有HTML标签的文本，很可能会破坏原有的HTML结构。Imagine，你有一段带有粗体、链接甚至图片标签的文章摘要，如果简单地截取到一半的<b>Tags, the result is that the page layout is chaotic, even causing the entire page style to be disordered, greatly reducing the user experience. AnQiCMS (AnQiCMS) is well aware of this pain point, and therefore provides a powerful content processing filter in the template engine, wheretruncatechars_htmlIt is a powerful tool for cutting HTML rich text content, which can accurately control the display length of 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' truncation ability. It does not cut as blindly as a regular string truncation, but intelligently parses HTML content, ensuring that all HTML tags opened before the truncation point (such as<div>/<span>/<a>/<b>All of them (auto) can be closed correctly. This completely avoids HTML structure damage and display abnormalities caused by improper cropping.

Usetruncatechars_htmlIt is very direct. You just need to apply it to the variable you want to truncate in the template, just like using other filters:

{{ obj|truncatechars_html:number }}

Here are theobjis the HTML content variable that you want to process,numberThen it is the total length of the expected character. It is worth noting that, thisnumberIt includes the ellipsis added automatically by the filter after the extraction...The number of characters occupied.The filter counts only visible text characters when calculating length, the HTML tags themselves are not included in the length, which ensures that the truncation accuracy meets our intuitive expectations.

For example, suppose 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 all closed correctly, ensuring the validity of HTML, and the style will not be affected.

Not onlytruncatechars_htmlEnglish: More options for capturing in AnQi CMS

The Auto CMS provides various filtering options to cater to different content types and display requirements. Understanding their differences can help you choose the appropriate tools more flexibly: English

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

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

  2. truncatewordsSometimes we prefer to cut by words rather than characters to ensure the integrity of the content. For plain text content,truncatewordsIt can be put to use. It will cut the text by words, avoiding 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 cut by words, and at the same time ensure that the HTML structure is not destroyed,truncatewords_htmlis the best choice. It combinestruncatewordsthe integrity of the wordstruncatechars_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 using flexibilitytruncatechars_htmland other extraction filters, you can easily handle content display needs in different scenarios.Whether it is to generate exquisite abstracts for article lists or to provide concise previews for product introductions, AnQi CMS offers powerful and easy-to-use tools to make your website content more professional and efficient.

Common Questions (FAQ)

1.truncatecharsandtruncatechars_htmlWhat are the core differences?

The core difference lies in the way HTML content is handled.truncatecharsIt is designed for plain text, it will truncate simply by the number of characters, regardless of whether the content contains HTML tags. If it truncates in the middle of a tag, it will cause the HTML structure to be damaged.truncatechars_htmlIt is specifically designed for rich HTML text, it intelligently identifies and closes unclosed HTML tags when extracting, ensuring that the extracted content is still valid HTML and does not disrupt the page layout.

2.truncatechars_htmlDoes it count HTML tags when calculating the length of characters?

No.truncatechars_htmlIn calculatingnumberThe length of the parameter specified, will only calculate the visible text content, not the characters of the HTML tags themselves (such as<p>/<b>auto. This makes it possible for us to more intuitively control the actual text length that the user can see.

3. If my content is too short to reachtruncatechars_htmlThe length set, and an ellipsis will be displayed...）

No. Only when the visible character length of the original content exceeds thenumberwhentruncatechars_htmlit will be truncated and an ellipsis will be added. If the original content is alreadynumberShort (or exactly equal tonumber) then it will be output as is, without an ellipsis.