Django实现Read more/Read less时避免单词拆分的技术问询

核心思路 #

替换按字符生硬截断的slice过滤器，改用按单词边界截断的逻辑，确保截断点落在单词末尾，不会出现拆分单词的情况。

具体实现步骤 #

1. 自定义Django模板过滤器 #

在你的Django应用下创建templatetags目录（没有的话新建），并添加两个文件：

• __init__.py（空文件，标记这是Python包）
• custom_filters.py（存放自定义过滤器代码）

在custom_filters.py中写入以下代码：

from django import template

register = template.Library()

@register.filter(name='truncate_on_word')
def truncate_on_word(value, max_length=300):
    # 内容长度没超限制，直接返回原内容
    if len(value) <= max_length:
        return value
    # 先截取到指定字符数位置
    truncated = value[:max_length]
    # 从截取后的内容末尾往前找最后一个空格，锁定单词边界
    last_space_index = truncated.rfind(' ')
    if last_space_index != -1:
        truncated = truncated[:last_space_index]
    # 添加省略号后返回
    return truncated + '...'

2. 模板中使用自定义过滤器 #

在需要展示内容的模板开头，先加载自定义过滤器：

{% load custom_filters %}

调整内容展示的HTML结构，用截断内容和完整内容分别渲染，配合JS切换显示状态：

<!-- 初始显示的截断内容（不会拆分单词） -->
<div class="content-preview">{{ article.content|truncate_on_word:300 }}</div>
<!-- 默认隐藏的完整内容 -->
<div class="content-full" style="display: none;">{{ article.content }}</div>
<!-- 仅当内容超过300字符时显示切换按钮 -->
{% if article.content|length > 300 %}
    <button class="toggle-content-btn">Read more</button>
{% endif %}

3. 调整JavaScript切换逻辑 #

替换原来的JS代码，直接切换完整内容和截断内容的显示状态：

const toggleBtn = document.querySelector('.toggle-content-btn');
const previewContent = document.querySelector('.content-preview');
const fullContent = document.querySelector('.content-full');

if (toggleBtn) {
    toggleBtn.addEventListener('click', () => {
        const isPreviewVisible = previewContent.style.display !== 'none';
        
        if (isPreviewVisible) {
            previewContent.style.display = 'none';
            fullContent.style.display = 'block';
            toggleBtn.textContent = 'Read less';
        } else {
            previewContent.style.display = 'block';
            fullContent.style.display = 'none';
            toggleBtn.textContent = 'Read more';
        }
    });
}

为什么这个方法有效 #

自定义过滤器truncate_on_word会先截取到300字符位置，再回退到最近的单词末尾完成截断，既保证了内容长度不超限制，又避免了拆分单词的问题。同时，完整内容直接使用原始文本，点击Read more后展示的是无割裂的完整内容。

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