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

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

组件

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

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

<Divider>或者</Divider>

我来解答赞 21 收藏

反馈

2 条解答

雨泽的笔记 Lv1

Ant Design的Divider组件加文字其实很简单，你差点就对了。直接在标签里写文字是对的，但是要用属性方式写，不是直接放在标签中间。

正确写法是这样的：

<Divider orientation="center">或者</Divider>

关键点是要加个orientation="center"属性，这样文字才会居中显示。默认情况下Divider就是个纯分割线，不加这个属性的话中间的文字确实不会显示。

顺便吐槽下，这问题我当年也遇到过，Ant Design的文档有时候藏得比较深，不如WordPress的钩子文档好找（职业病犯了）。

2026-03-09 08:01

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