就业培训     下载中心     Wiki     联络
登录   注册
  1. 首页
  2. HTML
  3. HTML 元素参考
  4. <pre>: The Preformatted Text element

在此页

HTML <pre> element represents preformatted text which is to be presented exactly as written in the HTML file. The text is typically rendered using a non-proportional (" monospace ") font. Whitespace inside this element is displayed as written.

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.

内容类别 流内容 ，可触及内容。
准许内容 措词内容 .
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts flow content .
Implicit ARIA role 无对应角色
Permitted ARIA roles 任何
DOM 接口 HTMLPreElement

属性

此元素只包括 全局属性 .

cols
包含 preferred count of characters that a line should have. It was a non-standard synonym of width . To achieve such an effect, use CSS width 代替。
width
包含 preferred count of characters that a line should have. Though technically still implemented, this attribute has no visual effect; to achieve such an effect, use CSS width 代替。
wrap
是 hint indicating how the overflow must happen. In modern browser this hint is ignored and no visual effect results in its present; to achieve such an effect, use CSS white-space 代替。

范例

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 和 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>

规范

规范 状态 注释
HTML 实时标准
The definition of '<pre>' in that specification. 		实时标准 No significant change from HTML5
HTML5
The definition of '<pre>' in that specification. 		推荐 No significant change from HTML 4.01 Specification
HTML 4.01 Specification
The definition of '<pre>' in that specification. 		推荐 Deprecated the cols 属性

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据
桌面 移动
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
pre Chrome 完整支持 Yes Edge 完整支持 12 Firefox 完整支持 1 IE 完整支持 Yes Opera 完整支持 Yes Safari 完整支持 Yes WebView Android 完整支持 Yes Chrome Android 完整支持 Yes Firefox Android 完整支持 4 Opera Android 完整支持 Yes Safari iOS 完整支持 Yes Samsung Internet Android 完整支持 Yes
cols 弃用 非标 Chrome 不支持 No Edge 不支持 No Firefox 不支持 1 — 29 IE 不支持 No Opera 不支持 No Safari 不支持 No WebView Android 不支持 No Chrome Android 不支持 No Firefox Android 不支持 4 — 29 Opera Android 不支持 No Safari iOS 不支持 No Samsung Internet Android 不支持 No
width 弃用 非标 Chrome 完整支持 Yes 注意事项
完整支持 Yes 注意事项
注意事项 指定 width attribute has no layout effect.
Edge 完整支持 12 注意事项
完整支持 12 注意事项
注意事项 指定 width attribute has no layout effect.
Firefox 完整支持 1 注意事项
完整支持 1 注意事项
注意事项 Since Firefox 29, specifying the width attribute has no layout effect.
IE 完整支持 Yes 注意事项
完整支持 Yes 注意事项
注意事项 指定 width attribute has no layout effect.
Opera 完整支持 Yes 注意事项
完整支持 Yes 注意事项
注意事项 指定 width attribute has no layout effect.
Safari 完整支持 Yes 注意事项
完整支持 Yes 注意事项
注意事项 指定 width attribute has no layout effect.
WebView Android 完整支持 Yes 注意事项
完整支持 Yes 注意事项
注意事项 指定 width attribute has no layout effect.
Chrome Android 完整支持 Yes 注意事项
完整支持 Yes 注意事项
注意事项 指定 width attribute has no layout effect.
Firefox Android 完整支持 4 注意事项
完整支持 4 注意事项
注意事项 Since Firefox 29, specifying the width attribute has no layout effect.
Opera Android 完整支持 Yes 注意事项
完整支持 Yes 注意事项
注意事项 指定 width attribute has no layout effect.
Safari iOS 完整支持 Yes 注意事项
完整支持 Yes 注意事项
注意事项 指定 width attribute has no layout effect.
Samsung Internet Android 完整支持 Yes 注意事项
完整支持 Yes 注意事项
注意事项 指定 width attribute has no layout effect.
wrap 弃用 非标 Chrome ? Edge ? Firefox 完整支持 1 IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android 完整支持 4 Opera Android ? Safari iOS ? Samsung Internet Android ?

图例

完整支持

完整支持

不支持

不支持

兼容性未知 ?

兼容性未知

非标。预期跨浏览器支持较差。

非标。预期跨浏览器支持较差。

弃用。不要用于新网站。

弃用。不要用于新网站。

见实现注意事项。

见实现注意事项。

另请参阅

元数据

  • 最后修改：
  1. <blockquote>
  2. <dd>
  3. <div>
  4. <dl>
  5. <dt>
  6. <figcaption>
  7. <figure>
  8. <hr>
  9. <li>
  10. <main>
  11. <ol>
  12. <p>
  13. <pre>
  14. <ul>
  15. HTML 元素
    1. A
      1. <a>
      2. <abbr>
      3. <acronym>
      4. <address>
      5. <applet>
      6. <area>
      7. <article>
      8. <aside>
      9. <audio>
    2. B
      1. <b>
      2. <base>
      3. <basefont>
      4. <bdi>
      5. <bdo>
      6. <bgsound>
      7. <big>
      8. <blink>
      9. <blockquote>
      10. <body>
      11. <br>
      12. <button>
    3. C
      1. <canvas>
      2. <caption>
      3. <center>
      4. <cite>
      5. <code>
      6. <col>
      7. <colgroup>
      8. <content>
    4. D
      1. <data>
      2. <datalist>
      3. <dd>
      4. <del>
      5. <details>
      6. <dfn>
      7. <dialog>
      8. <dir>
      9. <div>
      10. <dl>
      11. <dt>
    5. E
      1. <em>
      2. <embed>
    6. F
      1. <fieldset>
      2. <figcaption>
      3. <figure>
      4. <font>
      5. <footer>
      6. <form>
      7. <frame>
      8. <frameset>
    7. G H
      1. <h1>
      2. <h2>
      3. <h3>
      4. <h4>
      5. <h5>
      6. <h6>
      7. <head>
      8. <header>
      9. <hgroup>
      10. <hr>
      11. <html>
    8. I
      1. <i>
      2. <iframe>
      3. <img>
      4. <input>
      5. <ins>
      6. <isindex>
    9. J K
      1. <kbd>
      2. <keygen>
    10. L
      1. <label>
      2. <legend>
      3. <li>
      4. <link>
      5. <listing>
    11. M
      1. <main>
      2. <map>
      3. <mark>
      4. <marquee>
      5. <menu>
      6. <menuitem>
      7. <meta>
      8. <meter>
    12. N
      1. <nav>
      2. <nobr>
      3. <noframes>
      4. <noscript>
    13. O
      1. <object>
      2. <ol>
      3. <optgroup>
      4. <option>
      5. <output>
    14. P
      1. <p>
      2. <param>
      3. <picture>
      4. <plaintext>
      5. <pre>
      6. <progress>
    15. Q
      1. <q>
    16. R
      1. <rp>
      2. <rt>
      3. <rtc>
      4. <ruby>
    17. S
      1. <s>
      2. <samp>
      3. <script>
      4. <section>
      5. <select>
      6. <shadow>
      7. <slot>
      8. <small>
      9. <source>
      10. <spacer>
      11. <span>
      12. <strike>
      13. <strong>
      14. <style>
      15. <sub>
      16. <summary>
      17. <sup>
    18. T
      1. <table>
      2. <tbody>
      3. <td>
      4. <template>
      5. <textarea>
      6. <tfoot>
      7. <th>
      8. <thead>
      9. <time>
      10. <title>
      11. <tr>
      12. <track>
      13. <tt>
    19. U
      1. <u>
      2. <ul>
    20. V
      1. <var>
      2. <video>
    21. W
      1. <wbr>
    22. X Y Z
      1. <xmp>

版权所有  © 2014-2026 乐数软件    

工业和信息化部： 粤ICP备14079481号-1