UI 组件 · 文字
正文段落
Paragraph
也叫：正文、段落、说明文字、Body Text、Body Copy、Text Block
一段完整的说明文字，用 p 标签写，放在标题下面讲清细节；好不好读取决于行宽、行高和字号。
点「标注」看每个部分叫什么，点「反例」看最常见的错误用法。
怎么跟 AI 说
改成你的业务内容再发把正文排得好读一点：正文段落用 p 标签，字号 16px，行高 1.75，颜色用深灰 #374151（不要用浅灰），段落之间间距 16px；正文容器最大宽度 680px，一行大约 35 个汉字，宽屏时不要撑满屏幕。每段控制在 3~5 行，超过就拆成两段，或把并列的要点改成列表。段落里的链接加下划线，强调用加粗，不要只靠颜色区分。
发给
01判断
你的内容是这样吗？
对照两列，确认正文段落是不是你要找的。
02避坑
常见坏用法
看起来能用，其实会给用户添麻烦。
- 01
一行文字横跨整个宽屏，读到行尾很难找到下一行的开头
下面的线框画的就是这种情况，红色虚线框是出问题的地方。右边的线框画的就是这种情况，红色虚线框是出问题的地方。
- 02
大段文字挤成一整块，不分段、没有段间距，行高也太小
- 03
正文用很浅的灰色小字，和背景对比度不够，读起来很累
03识别
怎么认出它
先看整体结构，再对照几个一眼能认出的特征。
结构
一个或多个 p 标签，每段是几行完整的句子，段落之间有明显的间距，可以夹带行内链接和粗体强调。
组成部分点一下，在上面的线框里标出来
识别特征
- 1几行左对齐、字号统一的完整句子，右边缘参差不齐
- 2通常在标题下方，段与段之间有空隙
- 3颜色是深灰或黑色，字比标题小、比辅助说明大
04解释
详细解释
正文段落就是页面上成段的文字：文章正文、功能介绍、商品描述、表单上方的说明。它承载标题说不下的细节，读者要一行一行往下读，所以好读比好看重要：中文正文一般 1416px，行高 1.61.8，一行 3040 个汉字（英文 6075 个字符），段与段之间的空隙要比行距大。
它和 标题 的区别：标题短、粗、大，用来扫读；段落是完整的句子，用来细读。它也不同于表单里的帮助说明、卡片里的一行摘要：那些是一两行辅助小字，颜色更浅、字号更小；段落是主要内容，颜色要足够深。
用 p 标签，每段只讲一件事，3~5 行最好读。灰色字别浅到看不清，和背景的对比度至少 4.5:1。宽屏上要限制正文的最大宽度（例如 680px），不要让一行字横跨整个屏幕。
开发者信息术语 ID、DOM 线索、识别优先级
- 术语 ID
component-paragraph- DOM 选择器
插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。
article p.prose p.markdown-body pp[class*="leading-"].leaddiv.ant-typographyp.ant-typographydiv.arco-typography[class*="MuiTypography-body1"][class*="MuiTypography-paragraph"].n-p
- 类名关键词
类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。
paragraphdescdescriptionintrointro-textbody-textbody-copytext-body
- 组件名
React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。
ParagraphBodyTextDescription
- 语义标签和角色
弱信号，要和其他线索一起才算识别出来。
<p>
- 优先级
- 1 · 同一层有多条命中时，优先级高的胜出
- 版本
- v2 · 更新于 2026/09/30