如何修复DRF中drf-spectacular生成的Swagger端点名称垂直显示问题

以下是几种可行的解决方法：

方法一：自定义CSS覆盖样式 #

这是最直接的修复方式，通过调整Swagger UI的CSS规则解决文本换行问题：

1. 在项目静态文件目录下创建自定义CSS文件（比如static/css/swagger_custom.css），添加以下样式：

/* 禁止端点路径文本换行，超出区域显示横向滚动条 */
.opblock-summary-path {
    white-space: nowrap;
    overflow-x: auto;
}

/* 调整标签容器宽度，避免挤压路径显示区域 */
.swagger-ui .opblock-tag {
    width: auto;
    min-width: 120px;
}

2. 在项目settings.py中配置drf-spectacular，指定加载该自定义CSS：

SPECTACULAR_SETTINGS = {
    'SWAGGER_UI_SETTINGS': {
        'customCss': '/static/css/swagger_custom.css',
    },
}

3. 生产环境下执行python manage.py collectstatic，确保静态文件被正确收集部署。

方法二：优化URL路径结构 #

如果端点的URL路径本身过长，会因容器宽度不足强制换行。可以简化URL命名，比如拆分过长的路径段、使用更简洁的资源标识。

方法三：更新依赖版本 #

部分旧版本的drf-spectacular或其依赖的Swagger UI存在样式bug，更新到最新版本可能直接解决问题：

pip install --upgrade drf-spectacular

方法四：调整Swagger UI布局配置 #

在settings.py的SPECTACULAR_SETTINGS中，尝试指定默认布局避免样式异常：

SPECTACULAR_SETTINGS = {
    'SWAGGER_UI_SETTINGS': {
        'layout': 'BaseLayout',
    },
}

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