<pre>: Phần tử Văn bản định dạng trước

Try it

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

pre {
  font-size: 0.7rem;
  margin: 0;
}

Thuộc tính

Phần tử này chỉ bao gồm các thuộc tính toàn cục.

width Deprecated Non-standard

Chứa số ký tự ưa thích mà một dòng nên có. Mặc dù vẫn được triển khai về mặt kỹ thuật, thuộc tính này không có hiệu ứng trực quan; để đạt được hiệu ứng như vậy, hãy sử dụng CSS width thay thế.

wrap Non-standard Deprecated

Là gợi ý chỉ ra cách xử lý tràn. Trong trình duyệt hiện đại, gợi ý này bị bỏ qua và không có hiệu ứng trực quan nào xảy ra; để đạt được hiệu ứng như vậy, hãy sử dụng CSS white-space thay thế.

Khả năng tiếp cận

Điều quan trọng là phải cung cấp mô tả thay thế cho bất kỳ hình ảnh hoặc sơ đồ nào được tạo bằng văn bản định dạng trước. Mô tả thay thế nên mô tả rõ ràng và súc tích nội dung của hình ảnh hoặc sơ đồ.

Những người gặp vấn đề về thị lực và duyệt web với sự hỗ trợ của công nghệ hỗ trợ như trình đọc màn hình có thể không hiểu các ký tự văn bản định dạng trước đang đại diện cho điều gì khi chúng được đọc theo thứ tự.

Sự kết hợp của các phần tử <figure> và <figcaption>, bổ sung bởi thuộc tính role của ARIA và aria-label trên phần tử pre cho phép nghệ thuật ASCII định dạng trước được thông báo là hình ảnh với văn bản thay thế, và figcaption phục vụ như chú thích của hình ảnh.

Ví dụ

<figure>
  <pre role="img" aria-label="ASCII COW">
      ___________________________
  &lt; I'm an expert in my field. &gt;
      ---------------------------
          \   ^__^
           \  (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

Ví dụ

Ví dụ cơ bản

HTML

<p>Using CSS to change the font color is easy.</p>
<pre><code>
body {
  color: red;
}
</code></pre>

Kết quả

Thoát ký tự không rõ ràng

Giả sử bạn muốn minh họa mã HTML trong phần tử <pre>. Các chuỗi ký tự xác định thẻ HTML hợp lệ (bắt đầu bằng < và kết thúc bằng >) sẽ không được hiển thị. Để hiển thị các ký tự thẻ dưới dạng văn bản, bạn cần thoát (ít nhất) ký tự < bằng tham chiếu ký tự của nó, để các chuỗi không còn xác định thẻ hợp lệ nữa.

Trên thực tế, trình phân tích HTML coi hầu hết các ký tự là văn bản thuần túy trừ trong các ngữ cảnh cụ thể. Ví dụ: < code là ổn, nhưng <code sẽ bị phân tích sai; &am; là ổn, nhưng & thì không. Tuy nhiên, thực hành tốt là thoát tất cả các ký tự không rõ ràng để tránh nhầm lẫn, đặc biệt nếu bạn đang tạo HTML theo cách lập trình và chèn nội dung <pre>. Trong trường hợp này, đây là quy tắc hữu ích để thoát ký tự:

1. Đầu tiên, viết nội dung ra, như bạn muốn nó xuất hiện trong tài liệu HTML.
2. Thay thế bất kỳ dấu và (&) bằng &. Thực hiện bước này trước, để các ký tự & mới được tạo ra trong bước tiếp theo không bị thoát.
3. Thay thế bất kỳ ký tự < bằng <.

Điều này sẽ dẫn đến nội dung được hiển thị như bạn dự định. Việc thay thế các ký tự cú pháp HTML khác là tùy chọn (như > thành >, " thành " và ' thành '), nhưng sẽ không gây hại gì.

HTML

<pre><code>
let i = 5;

if (i &lt; 10 &amp;&amp; i &gt; 0)
  return &quot;Single Digit Number&quot;
</code></pre>

Kết quả

Tóm tắt kỹ thuật

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• CSS: white-space, word-break
• Character reference
• Các phần tử liên quan: <code>, <samp>, <kbd>