如何配置Django表单中长文本的自动换行显示

针对OneToOneField关联内容过长导致显示溢出的问题，有几种实用的解决方式，优先推荐前端CSS控制，灵活且不影响后端逻辑：

1. 前端CSS强制换行并限制行数 #

Django表单渲染后会生成标准HTML元素，直接给对应的字段容器添加样式即可适配窗口：

模板代码示例 #

<!-- 在表单渲染的模板中，给目标字段套上自定义类的容器 -->
<div class="form-group">
    {{ form.related_model_field.label_tag }}
    <div class="wrapped-select">
        {{ form.related_model_field }}
    </div>
</div>

CSS样式 #

.wrapped-select {
    max-width: 100%; /* 自动适配父容器宽度 */
}

/* 针对下拉选择器的样式，适配OneToOneField默认的Select组件 */
.wrapped-select select {
    white-space: pre-wrap;    /* 保留换行符并自动换行 */
    word-break: break-word;   /* 长单词强制拆分换行 */
    max-height: 3.6em;        /* 限制显示3行（假设行高1.2em） */
    overflow: hidden;         /* 超出部分隐藏 */
    text-overflow: ellipsis;  /* 可选：超出末尾显示省略号 */
}

如果是用文本框显示关联内容（比如自定义widget为TextInput），把select替换成input或textarea即可。

2. 自定义表单Widget统一配置样式 #

如果想在后端统一给字段添加样式，避免重复写模板代码，可以自定义Widget并添加属性：

# forms.py
from django import forms
from .models import YourModel

class YourForm(forms.ModelForm):
    class Meta:
        model = YourModel
        fields = ['related_model_field']
        widgets = {
            'related_model_field': forms.Select(attrs={
                'class': 'wrapped-select',
                # 也可以直接内嵌样式
                'style': 'white-space: pre-wrap; word-break: break-word; max-height: 3.6em;'
            })
        }

3. 预处理关联模型的显示文本 #

如果关联模型的__str__方法返回内容过长，也可以在表单中截断文本，避免前端压力：

# forms.py
from django import forms
from .models import YourModel, RelatedModel

class TruncatedSelect(forms.Select):
    def label_from_instance(self, obj):
        # 截断到指定长度，超出部分加省略号
        display_text = str(obj)
        return display_text[:40] + '...' if len(display_text) > 40 else display_text

class YourForm(forms.ModelForm):
    class Meta:
        model = YourModel
        fields = ['related_model_field']
        widgets = {
            'related_model_field': TruncatedSelect()
        }

注意：这种方式会直接修改显示的文本内容，适合不需要完整显示长文本的场景；如果需要完整展示，还是优先用前端CSS换行方案。

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