试一试
S
A
LUT
M
O N
D E
DONT
JE SUIS
LA LAN
G U E É
L O Q U E N
TE QUESA
B O U C H E
O P A R I S
T I R E ET TIRERA
T O U JOURS
AUX A L
LEM ANDS - Apollinaire
pre {
font-size: 0.7rem;
margin: 0;
}
属性
此元素仅包含全局属性。
width 已弃用 非标准
包含行应具有的首选字符数。尽管在技术上仍然实现,但此属性没有视觉效果;要实现这种效果,请改用 CSS width。
wrap 非标准 已弃用
这是一个提示,指示溢出应如何发生。在现代浏览器中,此提示被忽略,其存在不会产生视觉效果;要实现这种效果,请改用 CSS white-space。
无障碍
为使用预格式文本创建的任何图像或图表提供替代描述非常重要。替代描述应清晰简洁地描述图像或图表的内容。
视力低下并借助屏幕阅读器等辅助技术浏览的人,当预格式文本字符按顺序读出时,可能无法理解它们所代表的含义。
示例
html
___________________________
< I'm an expert in my field. >
---------------------------
\ ^__^
\ (oo)\_______
(__)\ )\/\
||----w |
|| ||
A cow saying, "I'm an expert in my field." The cow is illustrated using
preformatted text characters.
MDN 理解 WCAG,指南 1.1 解释
H86: 为 ASCII 艺术、表情符号和俚语提供文本替代方案 | WCAG 2.0 的 W3C 技术
示例
基本示例
HTML
html
Using CSS to change the font color is easy.
body {
color: red;
}
结果
转义模糊字符
假设你想在
元素中演示 HTML 代码。定义有效 HTML 标签的字符序列(以 < 开头,以 > 结尾)将不会显示。要将标签字符显示为文本,你需要使用其字符引用转义(至少)< 字符,这样序列就不再定义有效的标签。实际上,HTML 解析器将大多数字符视为纯文本,除非在特定上下文中。例如,< code 是可以的,但
内容。在这种情况下,这里有一个关于如何转义字符的经验法则:首先,按照你希望它在 HTML 文档中显示的方式写出内容。
将所有和号 (&) 替换为 &。首先执行此步骤,这样在下一步中生成的新 & 字符就不会被转义。
将所有 < 字符替换为 <。
这将使内容按你预期的方式显示。替换其他 HTML 语法字符是可选的(例如 > 替换为 >," 替换为 ",' 替换为 '),但不会造成任何损害。
HTML
html
let i = 5;
if (i < 10 && i > 0)
return "Single Digit Number"
结果
技术摘要
内容类别
流内容,可感知内容。
允许内容
短语内容.
标签省略
无,起始标签和结束标签都必须存在。
允许父级
任何接受流内容的元素。
隐式 ARIA 角色
generic
允许的 ARIA 角色
任意
DOM 接口
HTMLPreElement
规范
规范
HTML# pre-元素
浏览器兼容性
加载中…
另见
CSS: white-space, word-break
字符引用
相关元素:
, ,帮助改进 MDN
此页面对您有帮助吗?
是
否
了解如何贡献 此页面最后修改于 2025 年 7 月 9 日,由 MDN 贡献者。
在 GitHub 上查看此页面 • 报告此内容的问题