How to ensure that long text content does not overflow the container in AnQiCMS?

In the operation of the AnQiCMS website, 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 severely affecting user experience and the professional image of the website.Fortunately, AnQiCMS provides various 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 importing materials from external sources.In AnQiCMS, whether through its powerful document content editor (supporting rich text format) or by using the Markdown editor (which may contain wide tables or long code blocks), if the content does not receive proper style control, the following situations may occur:

• long words or links: Compound words in some languages (such as German) may be very long, or long URLs that do not wrap may exceed the container boundary.
• Images are not limited in size: The inserted image is too large and is displayed directly on the front end without processing, which may cause it to expand or overflow the container.
• Lacks line break mechanism.Continuous text string without spaces or punctuation marks as breakpoints, causing the browser to not automatically wrap.
• Table or code block too wide: A table or code block inserted in a Markdown or rich text editor exceeds the width limit of the parent container.

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

Front-end style control: the first line of defense against overflow.

Make sure that long text content does not overflow, the most fundamental and direct method is to control it through frontend 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.Our template file(.html）and related static resources (styles, scripts, images, etc.) are stored separately/templateand/public/static/In the catalog.

In CSS, there are several key properties that 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 automatically added when needed). For example, for containers that may contain overly wide content:

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

2. word-wrap/overflow-wrappropertyThese two properties:word-wrapis the old version,overflow-wrapIs the standard version) used to control whether word internal line breaking is allowed to prevent long words from overflowing the container.

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

3. word-breakproperty: Provides more refined line-breaking control. For example,word-break: break-all;It will break 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;Use in conjunction, for displaying an ellipsis when text overflows in a single line.

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

Taking into account that AnQiCMS supports adaptive, code adaptation, and PC+mobile independent site mode, when designing styles, combine@mediaIt is crucial to query to create a responsive layout to ensure that content is displayed well on different devices.

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

AnQiCMS is a powerful template engine with rich filter functions, which allows us to fine-tune long text at the content output level, avoiding the direct display problems caused by backend data.

When we call the content of articles, products, or single pages in templates, 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 HTML content is parsed correctlyThe AnQiCMS template engine defaults to escaping HTML tags for security. However, for text that is itself HTML content, we need to usesafeThe filter tells the system that this is safe content, it should be parsed and displayed directly, not escaped. Otherwise, you might see the raw<p>/<img>tags instead of the rendered effect.

2. render=trueParameter: Automatic conversion of Markdown contentIf you have enabled the Markdown editor in the AnQiCMS backend and the content is in Markdown format, then when callingarchiveDetailorcategoryDetailtag to obtainContentWhen specifying a field, you can addrender=trueparameters to let the system automatically convert Markdown format to HTML for correct display on the frontend.

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

3. Truncate text to fit lists and previews:truncatecharsandtruncatewordsOn the list page or summary area of the website, we usually do not want to display the complete long text. AnQiCMS providestruncatechars(character truncation) andtruncatewords(Word-based truncation) filter to intelligently shorten content and add an ellipsis at the end(...)

   • truncatechars:N: Truncate by character count, N is the number of characters including the ellipsis.
   • truncatewords:N: Truncate by word count, N is the word count including ellipsis.
   • truncatechars_html:Nandtruncatewords_html:NThese are specifically designed versions for HTML content, which will try to maintain the structure of HTML tags as much as possible when truncated, to avoid destroying the page layout due to truncation. For example, show the introduction on the article list page:

   <p>{{ item.Description|truncatechars:100 }}</p> {# 截断为100个字符 #}
   <p>{{ articleContent|truncatewords_html:30|safe }}</p> {# 截断HTML内容为30个单词 #}
   

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