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 bluntly cut off in the middle of the word after automatic line break on the web page, which affects the reading experience and the beauty of the page.This not only makes the content look unprofessional, but may also hinder the effective communication of information.So, how can we skillfully handle this long text in AnQiCMS to ensure that the words remain intact during automatic line breaks?

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

Using CSS styles for control: more elegant visual presentation

For automatic line breaking of web content, the most direct and recommended way is to use CSS styles for control. CSS providesoverflow-wrapandword-breakproperties to finely manage the line-breaking behavior of text.

  • overflow-wrap: break-word;This property is a powerful tool to solve the problem of line breaking for long words (or long strings without spaces) in narrow containers.Its function is, only when a long word cannot be displayed completely on the current line, is it allowed for the browser to break the word at any internal position.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 the longer parts are also handled properly, avoiding content overflow.

  • word-break: break-all;This property is more aggressive, allowing for line breaks between any characters within a word, even if the word can be completely placed at the end of a line.For Chinese and other Asian languages, since they themselves do not have strict word boundaries, this attribute is sometimes used to force line breaks.break-allMay cause words to be unnaturally truncated unless you indeed need this strict character-based line-breaking effect. Generally speaking, we tend to useoverflow-wrap: break-word;To take into account both aesthetics and content integrity.

  • hyphens: auto;： This is a more advanced attribute that allows the browser to insert hyphens within words for wrapping, which usually requires specifying a language environment (such aslang="en"）。Use this property to achieve magazine-style elegant word wrapping and line breaks, but it has certain requirements for browser support and content language.

How to apply CSS?

You can add in the AnQiCMS template's global style file (usually located/public/static/css/the directorybase.htmlor add directly inbase.htmlthe file<head>some additions<style>Labels can be used to define these rules. For example, you can add the following style to the container of article content:

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

Then in your document detail template (for example)archive/detail.htmlMake sure your content is wrapped in an element witharticle-contentThe elements of the class and use|safeRender HTML content safely using a filter:

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

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

AnQiCMS's template engine (similar to Django template syntax) provides powerful filtering functions, which can perform text processing before content rendering. For long text line breaks,wordwrapandlinebreaksbrThe filter is a tool worth attention.

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

    Use CasesWhen you need to format a content that is originally in plain text format but want to control the maximum line length in display (such as article summaries, descriptive texts for custom parameters, etc.), `word