<pre> - HTML(超文本标记语言) 编辑
HTML <pre> 元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排,以等宽字体的形式展现出来,文本中的空白符(比如空格和换行符)都会显示出来。(紧跟在 <pre> 开始标签后的换行符也会被省略)
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
注意: 你需要将该元素里的 '<' 字符转义为 '<' 以保证代码里的关闭代码不被浏览器解释为标签。
内容类别 | 流内容( flow content) , 可触知的内容(palpable content). |
---|---|
允许的 内容 | Phrasing content. |
省略标签 | 不允许,开始标签和结束标签都不能省略。 |
允许的 父元素 | 任何可以接受流内容( flow content) 的元素 |
允许的 ARIA 角色 | 任何 |
DOM 接口 | HTMLPreElement |
属性
这个元素只具有全局属性。
cols
- 定义每行的最大字符数。这是一个非标准的属性,作用与
width
相同。要实现这样的效果,应该使用CSS。 width
- 包含每行的最大字符数。虽然在技术上仍被实现,但这个属性没有视觉效果。要实现这样的效果,应该使用CSS。
wrap
- 提示溢出怎样发生。在现代浏览器中,这个提示会被忽略,且被没有视觉效果。要实现这样的效果,应该使用CSS。
示例
HTML
<p>Using CSS to change the font color is easy.</p>
<pre>
body {
color: red;
}
</pre>
结果
可访问性
It is important to provide an alternate description for any images or diagrams created using preformatted text. The alternate description should clearly and concisely describe the image or diagram's content.
People experiencing low vision conditions and browsing with the aid of assistive technology such as a screen reader may not understand what the preformatted text characters are representing when they are read out in sequence.
A combination of the <figure>
and <figcaption>
elements, supplemented by a combination of an id
and the ARIA role
and aria-labelledby
attributes allow the preformatted text to be announced as an image, with the figcaption
serving as the image's alternate description.
示例
<figure role="img" aria-labelledby="cow-caption">
<pre>
___________________________
< I'm an expert in my field. >
---------------------------
\ ^__^
\ (oo)\_______
(__)\ )\/\
||----w |
|| ||
</pre>
<figcaption id="cow-caption">
A cow saying, "I'm an expert in my field." The cow is illustrated using preformatted text characters.
</figcaption>
</figure>
- MDN Understanding WCAG, Guideline 1.1 explanations
- H86: Providing text alternatives for ASCII art, emoticons, and leetspeak | W3C Techniques for WCAG 2.0
规范
规范 | 状态 | 备注 |
---|---|---|
HTML Living Standard <pre> | Living Standard | No significant change from HTML Living Standard |
HTML5 <pre> | Recommendation | No significant change from HTML 4.01 Specification |
HTML 4.01 Specification <dl> | Recommendation | Deprecated the cols attribute |
浏览器兼容性
BCD tables only load in the browser
参见
- CSS:
white-space
,word-break
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论