In AnQiCMS website operation, displaying long text content is a common and critical issue.If not handled properly, the content may overflow its container, causing the page layout to become chaotic and seriously affecting user experience and the professional image of the website.It is fortunate that AnQiCMS provides a variety of tools and strategies to help us effectively manage and control the display of long text.

Understanding content overflow: Why does it happen?

Content overflow usually refers to text or images that exceed the HTML element they are in (such asdiv/pThe boundary of or other containers. This is especially common when dealing with user-generated content or imported materials from outside.

  • long words or links：Some compound words in some languages (such as German) may be very long, or long URLs without line breaks, may exceed the container boundary.
  • No size limit on imagesThe inserted image size is too large and will be displayed directly on the front-end without processing, which may cause the container to expand or overflow.
  • Lacks line breaking mechanismContinuous text string, without spaces or punctuation marks as breakpoints, causing the browser to fail to automatically wrap.
  • Table or code block too wide：In Markdown or rich text editors, tables or code blocks inserted that exceed the width limit of the parent container.

These issues not only affect the appearance, but may also hinder users from reading normally, and even cause serious compatibility issues on mobile devices.

Front-end Style Control: The First Line of Defense Against Overflow

To ensure that the long text content does not overflow, the most fundamental and direct method is to control it through front-end styles (CSS).AnQiCMS uses a templated design, allowing us to fully customize the style and layout of the website, which provides us with great flexibility..html）and related static resources (styles, scripts, images, etc.) are stored separately/templateand/public/static/In the catalog.

There are several key properties in CSS that can help us effectively handle content overflow:

  1. overflowPropertyThis is the most commonly used attribute to control overflow. We can set it tohidden(hide the overflow part),scroll(add a scrollbar to view the overflow content) orauto(Scrollbars are added automatically when needed). For example, for containers that may contain extra-wide content:

    .content-container {
    overflow-x: auto; /* 当内容水平方向溢出时显示滚动条 */
    max-width: 100%; /* 确保容器本身不会过宽 */
}

  2. word-wrap/overflow-wrapPropertythese two properties:word-wrapare outdated,overflow-wrapEnglish standard version) is used to control whether to allow line breaks within words to prevent long words from overflowing the container.

    .text-block {
    word-wrap: break-word; /* 允许在单词内强制断行 */
    overflow-wrap: break-word; /* 标准属性，效果同上 */
}

  3. word-breakProperty: Provides more fine-grained line break control. For example,word-break: break-all;It breaks lines between any characters (including Chinese), which is very useful for certain scenarios that require strict control of width.

    .strict-width-text {
    word-break: break-all; /* 在任何字符处断行 */
}

  4. text-overflowPropertyis usually withwhite-space: nowrap;andoverflow: hidden;Used in combination, it is used to display an ellipsis when the single-line text overflows.

    .single-line-ellipsis {
    white-space: nowrap;   /* 文本不换行 */
    overflow: hidden;      /* 隐藏溢出内容 */
    text-overflow: ellipsis; /* 溢出时显示省略号 */
}

Considering AnQiCMS supports adaptive, code compatibility, and PC+mobile independent station mode, when designing the style, it is combined with@mediaIt is crucial to query to create a responsive layout, ensuring that content is displayed well on different devices.

Skillfully use AnQiCMS template tags and filters to handle long text.

AnQiCMS Powerful template engine and rich filter functions, allowing us to perform fine-grained processing on long texts at the content output level, avoiding direct display issues caused by backend data.

When we call the content of an article, product, or single page in a template, we usually usearchiveDetailorpageDetailtags to get the content. For example, to get the content of an article:

{%- archiveDetail articleContent with name="Content" %}
{{articleContent|safe}}

HerearticleContentThe variable contains the complete HTML content of the article.

  1. safeFilter: Ensure that HTML content is parsed correctlyAnQiCMS's template engine defaults to escaping HTML tags for security reasons. However, for text content that is inherently HTML, we need to usesafeFilter to inform the system that this is safe content, should be directly parsed and displayed, rather than escaped. Otherwise, you might see the original<p>/<img>tags instead of the rendered effect.

  2. render=true参数：Markdown 内容的 English 转换If you have enabled the Markdown editor in the AnQiCMS backend and the content is in Markdown format, then in the callarchiveDetailorcategoryDetailtags to getContentField, you can addrender=trueParameter, let the system automatically convert Markdown format to HTML for correct display on the front end.

    <div>文档内容：{% archiveDetail archiveContent with name="Content" render=true %}{{archiveContent|safe}}</div>

  3. Truncate text to fit in lists and previews:truncatecharsandtruncatewordsOn the list page or summary area of the website, we usually do not want to display the full long text. AnQiCMS providestruncatechars(character truncation) andtruncatewordsThe auto filter truncates content by words and adds an ellipsis at the end....).

    • truncatechars:N: Truncates by character count, N is the number of characters, including the ellipsis.
    • truncatewords:NEnglish: Truncate by word count, N is the number of words, including ellipsis.
    • truncatechars_html:Nandtruncatewords_html:NThese two are specifically designed for HTML content, and they will try to maintain the integrity of the HTML tags when truncating, to avoid destroying the page layout due to truncation. For example, when displaying a brief introduction on the article list page:
    <p>{{ item.Description|truncatechars:100 }}</p> {# 截断为100个字符 #}
<p>{{ articleContent|truncatewords_html:30|safe }}</p> {# 截断HTML内容为30个单词 #}

  4. Auto formatting:wordwrapandlinebreaksbrFor long strings without spaces (such as long URLs, product models, or certain programming codes), even if CSS is setword-wrap: break-word;It may also not be able to solve the problem perfectly.wordwrap:NThe filter can force a newline after a specified number of characters N. If your text content is plain text and you want to keep the newline characters\n<br/>Label, can use `line