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.