试一试

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。

无障碍

为使用预格式文本创建的任何图像或图表提供替代描述非常重要。替代描述应清晰简洁地描述图像或图表的内容。

视力低下并借助屏幕阅读器等辅助技术浏览的人,当预格式文本字符按顺序读出时,可能无法理解它们所代表的含义。

元素的组合,辅以 pre 元素上的 ARIA role 和 aria-label 属性,允许预格式的 ASCII 艺术被宣布为带有替代文本的图像,并且 figcaption 用作图像的标题。

示例

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 上查看此页面 • 报告此内容的问题