When displaying content on a website, we often encounter issues with long text not being displayed well on different devices, especially on mobile devices, where overly long line widths can reduce the reading experience and even damage the page layout. Anqi CMS provides a series of practical filters to help us better control the display of text, among whichwordwrapThe filter is the tool to solve this problem. It ensures that the text wraps automatically when it reaches a specified length, thereby improving the readability and aesthetic beauty 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 reading difficulties or layout overflow caused by overly long single-line text.By inserting a line break, it makes the text block visually neat and easier for users to read.

wordwrapThe syntax of the filter

In the AnQi CMS template system,wordwrapThere are two main ways to use filters, all of which follow the syntax style of Django template engines:

  1. Applied directly to variablesThis is the most common and intuitive way, through the pipe symbol|Apply the filter to the variable to be processed. Syntax:{{ 变量名 | wordwrap: 长度数值 }}For example, if you have a variable namedarticle.Contentand you want it to wrap at about 20 characters, you can write it 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, or combinations of other variables) you can usefilterLabel this part of the content, then applywordwrapFilter. Syntax:

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

    The advantage of this method is that it can uniformly handle line breaks for any content within the tag, providing greater flexibility.

Parameter details

wordwrapThe filter accepts a required parameter:

  • 长度数值 (number)This is an integer representing the maximum number of characters you want for each line of text. When the text reaches this length, the filter will try to insert a newline character.

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

Application scenarios and precautions

  1. Improve readabilityIn news, blog articles, product descriptions, and other areas with a lot of text, usewordwrapEffectively limit the line width to make it more in line with human reading habits and avoid long sentences that can't be seen at a glance.
  2. Layout adaptabilityIn responsive design,配合CSS styles,wordwrapIt helps the text adapt to different screen sizes, prevent text from overflowing the container, and thus maintain a tidy and consistent layout of the page.
  3. “word”and“character”:wordwrapThe default behavior is based onwordsPerform a line break. This means it will break between words with spaces.If you encounter a very long English word, or a language like Chinese, Japanese, Korean (CJK) that does not have explicit space separation, it may not wrap at the specified length precisely, but rather wait for the next 'break point' (such as a punctuation mark, or until the next space).For continuous Chinese text, it treats it as a very long 'word', causing it to not automatically wrap even if it exceeds the set length.
  4. Browser display:wordwrapThe filter will insert a line break (") in the processed text."}In HTML, by default, browsers will ignore these line breaks and treat them as spaces.In order to make these line breaks truly display as line breaks on the page, you usually need:
    • Wrap the content in<pre>tags (preThe tags will preserve spaces and line breaks in the text).
    • Use CSS propertieswhite-space: pre-wrap;Or `white-space: pre-line;