Django-summernote安全关键字用法导致文本无法自动换行问题

问题根源 #

Summernote粘贴纯文本时，会将所有内容合并为单个行内元素或无换行的块级元素，HTML默认会忽略连续空格与换行，导致长文本无法自动换行；而硬编码文本浏览器会自动处理换行逻辑，所以表现正常。

解决方案 #

1. 替换Tailwind换行类，强制文本换行

把break-words换成break-all，或者添加overflow-wrap: anywhere样式，后者对长文本的换行支持更彻底：

<div class="prose max-w-full break-all">
    {{ post.content | safe }}
</div>

或者直接用内联样式增强：

<div class="prose max-w-full" style="overflow-wrap: anywhere; word-break: break-word;">
    {{ post.content | safe }}
</div>

2. 配置Summernote，让粘贴的文本自动分段/换行

在初始化Summernote时，开启纯文本粘贴模式，让工具自动处理文本格式：

$('#summernote').summernote({
    pastePlain: true, // 粘贴纯文本，自动转换为段落
    onPaste: function(e) {
        // 自定义粘贴处理，手动添加换行
        var text = e.originalEvent.clipboardData.getData('text');
        e.preventDefault();
        document.execCommand('insertText', false, text.replace(/\n/g, '<br>'));
    }
});

3. 用Django过滤器处理文本换行

如果Summernote存储的文本包含原始换行符，用linebreaksbr过滤器将换行转换为<br>标签，强制换行：

<div class="prose max-w-full break-words">
    {{ post.content | linebreaksbr | safe }}
</div>

如果文本没有换行符，可在视图层处理，给长文本按一定长度插入换行后再传递到模板。

4. 检查Summernote输出的HTML结构

查看post.content的实际HTML内容，确认是否被<span>等行内元素包裹。如果是，可通过CSS强制行内元素换行：

.prose span {
    display: inline-block;
    width: 100%;
    overflow-wrap: break-word;
}

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