Django富文本内容溢出容器且无法分段显示问题求助

问题根源 #

RichTextUploadingField存储的是带HTML结构的内容（比如<p>段落标签、<br>换行），如果前台直接输出时未关闭Django的HTML转义，会导致标签被解析成纯文本，段落丢失；同时缺少CSS约束会引发容器溢出、留白异常。

修复步骤 #

1. 正确渲染HTML内容 #

在模板中输出富文本字段时，使用safe过滤器关闭Django的自动转义，让浏览器解析HTML标签：

{{ project.detail|safe }}

注：django-ckeditor默认会过滤危险HTML标签，只要未修改默认配置，使用safe不会有XSS风险。

2. 添加CSS适配容器 #

给承载富文本的容器添加样式，解决换行、溢出和留白问题：

.project-detail-container {
    white-space: pre-wrap; /* 保留换行，同时自动折行 */
    word-wrap: break-word; /* 长单词自动拆分换行 */
    max-width: 100%; /* 限制内容最大宽度为容器宽度 */
    padding: 0 1.2rem; /* 调整左右内边距，修正留白 */
    box-sizing: border-box; /* 内边距计入容器宽度，避免溢出 */
}

然后在模板中给容器绑定该类：

<div class="project-detail-container">
    {{ project.detail|safe }}
</div>

3. 验证模型配置（辅助检查） #

确保模型中字段定义正确：

from ckeditor_uploader.fields import RichTextUploadingField

class Project(models.Model):
    # 其他字段...
    detail = RichTextUploadingField(verbose_name="项目详情")

排查要点 #

• 查看页面源码，确认<p>等标签是否被正确输出（而非转义后的<p>）
• 检查浏览器控制台，排查是否有CSS优先级冲突导致容器宽度异常

内容的提问来源于stack exchange，提问作者Yusuf Khan