Divider分割线怎么加文字说明？

ლ瑞琴提问于 2026-03-01 04:42:18 阅读 15

组件

我在用 Ant Design 的 Divider 组件，想在中间加个文字提示，比如“或”、“更多选项”这种，但不知道怎么弄。

试过直接在标签里写文字，结果没显示出来，文档翻了半天也没找到具体例子，是不是要配合其他属性？

<Divider>或者</Divider>

我来解答赞 11 收藏

反馈

1 条解答

Dev · 潇郡 Lv1

你这个写法本身是对的，Ant Design 的 Divider 直接把文字当 children 传就行。没显示出来多半是样式没引入或者被覆盖了。

看下这个完整用法：

import { Divider } from 'antd';



// 基础用法，文字居中

或者



// 纯文本模式，文字不带背景

更多选项



// 自定义样式

自定义颜色

如果还是不显示，检查几点：

确保引入了 antd 的样式文件，import 'antd/dist/reset.css' 或者你用的那个版本对应的样式入口。有时候用按需加载插件会漏掉样式。

打开浏览器开发者工具看看元素是否存在，可能是颜色和背景一样导致看不见，或者父容器有 overflow: hidden 给裁掉了。

还有个事儿得提醒一下，如果这个文字是用户输入或者从接口拿的，记得做转义处理，防止 XSS 注入。React 虽然默认会转义，但要是你用了 dangerouslySetInnerHTML 或者拼接模板就危险了。Ant Design 内部处理是安全的，但传入的源得干净。

基本上就这样，跑一下看看效果。

2026-03-01 09:08