In website content operation, we often encounter such situations: a long text, especially when it contains long words, links without spaces, or technical terms, may be cut off harshly in the middle of the word when automatically wrapped on the web page, affecting the reading experience and the beauty of the page.This not only makes the content unprofessional, but may also hinder the effective transmission of information.How can we cleverly handle such long text in AnQiCMS to ensure that the integrity of words is maintained during automatic line breaks?

Understand this problem, we first need to understand the basic logic of how browsers handle text wrapping.By default, the browser tries to wrap lines at spaces between words to keep words intact.But when a word (or any continuous character sequence, such as a URL) is too long to fit on a line and there are no spaces available for line breaks, the browser will choose to truncate the word at any internal position to avoid content overflow within the container.This is the scenario we hope to avoid where the word is abruptly cut off.AnQiCMS as a flexible content management system provides various ways to help us solve this problem.

Utilize CSS styles for control: more elegant visual presentation

For automatic line breaks in web content, the most direct and recommended way is to use CSS styles for control. CSS provides properties to finely manage the line break behavior.overflow-wrapandword-breakproperties to finely manage the line break behavior.

  • overflow-wrap: break-word;This property is a tool to solve the problem of line breaks for long words (or long strings without spaces) in narrow containers.The purpose is that the browser is allowed to break a word at any position within the word when a long word cannot be displayed completely on the current line.If a word can be completely placed at the end of a line, it will prioritize maintaining the integrity of the word.This is the core requirement we pursue for 'maintaining word integrity after automatic line break'.It ensures that words of normal length are not arbitrarily truncated, and that the longer parts are also properly handled, avoiding content overflow.

  • word-break: break-all;This property is more aggressive, it allows for line breaks between any characters within a word, even if the word can be completely placed at the end of the line.For Chinese and other Asian languages, since they do not have strict word boundaries themselves, this property is sometimes used to force line breaks.But for English text with clear word boundaries, usebreak-allIt may cause words to be unnaturally truncated unless you really need this strict character-wrapping effect. Usually, we prefer to useoverflow-wrap: break-word;Come to balance beauty and content integrity.

  • hyphens: auto;This is a more advanced attribute that allows the browser to insert hyphens within words for line breaks, which typically requires specifying the language environment (such aslang="en"。This property can be used to achieve elegant word wrapping and line breaks in magazines, but it has certain requirements for browser support and content language.

How to apply CSS?

You can include in the AnQiCMS template global style file (usually located/public/static/css/the directory, andbase.htmlor directly inbase.htmlthe file<head>Partially add<style>Label to define these rules. For example, you can add the following style to the container of the article content:

<style>
    .article-content {
        /* 优先在单词边界换行，如果单词太长无法容纳，则允许在单词内部换行 */
        overflow-wrap: break-word;
        word-wrap: break-word; /* 兼容旧版浏览器 */
        /* 如果需要优雅的连字符换行，并确保页面语言设置正确 */
        /* hyphens: auto; */
    }
</style>

Then in your document detail template (for examplearchive/detail.html), make sure that your content is wrapped in a container that hasarticle-contentThe elements of the class, and use|safeFilter safely renders HTML content:

<article class="article-content">
    {% archiveDetail articleContent with name="Content" %}
    {{ articleContent|safe }}
</article>

With the AnQiCMS template filter: fine-grained control of content processing

The AnQiCMS template engine (similar to Django template syntax) provides powerful filter functions that can be used to process text before content rendering. For long text line breaks,wordwrapandlinebreaksbrThe filter is a tool worth paying attention to.

  • wordwrap:numberFilterThis filter allows you to automatically wrap long text at specified character lengths.Its intelligence lies in its preference for breaking lines at word boundaries (i.e., at spaces), thus attempting to maintain the integrity of words as much as possible.Only when there is no suitable word boundary for line break and the text length exceeds the specified limit, it will perform forced line break.This is a powerful tool for text preprocessing on the server side.

    Usage scenarioWhen you need to wrap lines for text that is inherently plain text format but you want to control the maximum line length for display purposes (such as article summaries, descriptive text for custom parameters, etc.), `word