In website content display, we often encounter layout issues with long text content.When text is too long and exceeds the container width, if not properly handled, it may cause layout disorder and a decline in reading experience.wordwrapIt can help us elegantly handle the automatic line break display of long text, and the key point is that it maintains the integrity of words, avoiding truncation in the middle of words, thereby greatly enhancing the professionalism and readability of the content.

wordwrapWhat is a filter?

wordwrapFilter is a tool used to handle automatic text wrapping.The core function is to format the long text by breaking lines according to the specified character length.wordwrapThe intelligence lies in its priority to identify 'word' boundaries in the text (usually spaces), ensuring that a complete word is not abruptly split in the middle, thus making the text after line breaks still natural and smooth.

How to usewordwrapFilter?

UsewordwrapThe filter is very intuitive, it accepts a parameter to define the maximum character length for each line of text.

The basic syntax format is as follows:

{{ 你的文本内容 | wordwrap:每行最大字符数 }}

Here,你的文本内容is the string variable you want to process for line breaks,每行最大字符数It represents a number, indicating the approximate number of characters you want to display per line.

For example, if you have a segment of variablesarchive.DescriptionContaining the document summary, and hoping it displays about 20 characters per line, you can use it like this:

<p>
  {{ archive.Description | wordwrap:20 }}
</p>

If your content is a longer English sentence, such as: "Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua." when appliedwordwrap:10When it comes to it, it will try to break the line at the word boundary around the 10th character, the effect may be as follows:

Lorem ipsum
dolor sit
amet,
consectetur
adipisici
elit, sed
eiusmod
tempor
incidunt ut
labore et
dolore magna
aliqua. Ut
enim ad minim
veniam, quis
nostrud
exercitation

It can be seen that each newline occurs at the end of a word, not in the middle of a word.

Actual application scenarios: Maintain elegant text and tidy layout.

In the Anqi CMS,wordwrapThe filter can be applied to various scenarios to optimize user experience and website layout:

  1. Document overview and summary:On the article list page or search results page, the document's overview (archive.Descriptionoften needs to limit the length and format the line breaks for aesthetics.wordwrapcan ensure that the introduction is neatly displayed within the specified width, while avoiding the reading obstacles caused by word truncation.
  2. Text block in sidebar or widget:The sidebar of a website usually has limited space, if it contains some descriptive text or announcements, usingwordwrapCan make these texts better adapt to narrow layouts and avoid overflow.
  3. Content generated dynamically:When the website content comes from user input or external data, and its length is uncontrollable,wordwrapProvided an automated solution, ensuring that all text content is presented in a unified and standardized format.

If your content has gone throughwordwrapAfter processing, it needs to be output in HTML format and retain line breaks, you can consider combininglinebreaksbra filter to convert line breaks into<br/>tags and usesafeThe filter ensures that HTML is parsed correctly:

<p>
  {{ archive.Description | wordwrap:30 | linebreaksbr | safe }}
</p>

Details to note

  • Line breaks in Chinese text: wordwrapThe filter identifies 'words' based on spaces and performs line breaks. This means that for languages like Chinese, which are written continuously without spaces separating words,wordwrapThe filter treats a continuous Chinese text as a single 'long word', so it does not automatically wrap within it. In this case, if you need to force a line break in Chinese text, it may be necessary to combine CSS styles (such asword-break: break-all;）or use other character count truncation logic.
  • Parameter flexibility: 每行最大字符数is a suggested value.wordwrapThe filter will attempt to break lines as close to this length as possible, but to maintain word integrity, the actual line length may be slightly shorter or longer than the set value.
  • Combination with HTML tags: wordwrapThe filter applies to plain text content.If your text contains HTML tags, these tags themselves are also considered part of the text, and may be counted towards the character count when line breaks occur.truncatechars_html），but this is different fromwordwrapthe word-wrap logic.

MasterwordwrapA filter that helps us better control the display effect of website content, allowing long texts to remain clear and beautiful under different layouts, thereby enhancing the overall user experience.

Common Questions (FAQ)

1.wordwrapFilters and CSS:word-breakWhat is the difference between properties?

wordwrapFilters are inserted by modifying the string content itself during template rendering, usually by adding line breaks (usually}]}\nThus, it achieves text line breaks. It is more focused on changing the text structure at the logical level.word-breakProperties are controlled on the browser side through styles to display text.It does not change the original text content, it only adjusts how the browser displays text wrapping in the layout.wordwrapIt aims to maintain word integrity.word-break: break-allThe content will force a line break at any character to fit the layout, even if it truncates words.

2.wordwrapHow does the filter perform when processing text containing HTML tags?

wordwrapThe filter treats strings containing HTML tags as plain text. This means, it will<p>/<a>Characters of tags such as also count, and line breaks are inserted at appropriate word boundaries (i.e., spaces).It does not parse HTML structure intelligently, nor does it format line breaks within tags.wordwrapAfter that, combined withsafeandlinebreaksbrProcess the potentially existing HTML tags with filters to ensure they display correctly.

3. Why does my Chinese content usewordwrapno line break effect after the filter?

wordwrapThe filter mainly relies on spaces in the text to identify word boundaries and perform line breaks. Due to the characteristics of the Chinese language, words are usually not separated by spaces, making a continuous segment of Chinese text bewordwrapregarded as an indivisible 'long word'.Therefore, it will not auto-wrap within this Chinese text.word-break: break-all;Property, or when processing on the backend, inserting zero-width spaces between Chinese words by programming to assist with line breaks.