When displaying content on a website, we often encounter issues with long text segments not being displayed well across different devices, especially on mobile. Excessive line widths can reduce the reading experience and even disrupt the page layout. Anqi CMS provides a series of practical filters to help us better control text display, includingwordwrapThe filter is the tool to solve this problem. It ensures that the text automatically wraps at the specified length, thereby improving the readability and aesthetics of the content.

What iswordwrapFilter?

wordwrapThe filter, as the name implies, is a feature used to automatically wrap long text content according to the character length you set.Its core goal is to optimize the visual presentation of text on the front-end page, avoiding difficulties in reading or layout overflow due to overly long single-line text.By inserting line breaks, it makes the text block more visually organized and easier for users to read.

wordwrapThe syntax structure of the filter

In the template system of AnQi CMS,wordwrapThere are mainly two ways to use filters, both following the syntax style of the Django template engine:

  1. Applied directly to variablesThis is the most common and direct way, through the pipe symbol.|Apply the filter to the variable to be processed. Syntax:{{ 变量名 | wordwrap: 长度数值 }}For example, if you have a variable namedarticle.ContentThe variable, hope it to be line-breaked around every 20 characters, it can be written like this:{{ article.Content | wordwrap:20 }}.

  2. asfilterTag usageWhen you need to process text content that is not a single variable, but a more complex template content (such as text blocks containing HTML tags, combinations of other variables), you can usefilterWrap this part of the content with a tag, and then applywordwrapFilter. Syntax:

    {% filter wordwrap: 长度数值 %}
    需要处理的文本内容
{% endfilter %}

    The advantage of this method is that it can perform uniform line breaks on any content inside the tag, providing greater flexibility.

Parameter Details

wordwrapThe filter accepts a required parameter:

  • 长度数值 (number)This is an integer that represents the maximum number of characters per line of text you wish to have. When the text reaches this length, the filter will attempt to insert a line break.

It should be noted that this "length" is based onwordscalculated. That is to say,wordwrapThe filter will try to insert line breaks at the spaces between words.

Application scenarios and precautions

  1. to enhance readabilityIn areas with a lot of text content such as news, blog articles, and product descriptions, usewordwrapCan effectively limit line width, making it more in line with human reading habits, and avoid long sentences that are too long to see at a glance.
  2. Layout adaptability: In responsive design, in conjunction with CSS styles,wordwrapCan help text adapt better to different screen sizes, preventing text overflow and maintaining the neat and consistent layout of the page.
  3. “Word” vs “Character”:wordwrapThe default behavior is based onwordsProceed to a new line.This means it will break lines between words.If you encounter a very long English word, or languages like Chinese, Japanese, or Korean (CJK) that do not have explicit space separation, it may not break at the specified length precisely, but will wait for the next 'breakable point' (such as a punctuation mark, or until the next space).For continuous Chinese text, it treats it as a superlong 'word', causing it not to automatically wrap even if it exceeds the set length.
  4. Browser display:wordwrapThe filter will insert line breaks in the processed text (\n）。In HTML, by default, the browser ignores these line breaks and treats them as spaces.
    • Wrapping the content in<pre>tags (pretags will preserve spaces and line breaks in the text).
    • Use CSS propertywhite-space: pre-wrap;or `white-space: pre-line;