Hiển thị phần tử dưới dạng văn bản được định dạng trước qua CSS

Question

Có cách nào để mô phỏng hiển thị phần tử pre qua CSS không?

Ví dụ: tôi có thể giữ nguyên khoảng trắng trong div này bằng cách sử dụng quy tắc CSS không?

<div class="preformatted"> 

    Please procure the following items: 

    - Soup 
    - Jam 
    - Hyphens 
    - Cantaloupe 
</div> 

Answer 1

Sử dụng white-space: pre để giữ nguyên định dạng khoảng trắng trong phần tử pre. Để tiến thêm một bước nữa, hãy thêm font-family: monospace, vì pre các yếu tố thường được đặt theo phông chữ đơn vị theo mặc định (ví dụ: để sử dụng với các khối mã).

.preformatted { 
 
    font-family: monospace; 
 
    white-space: pre; 
 
}

<div class="preformatted"> 
 

 
    Please procure the following items: 
 

 
    - Soup 
 
    - Jam 
 
    - Hyphens 
 
    - Cantaloupe 
 
</div>

Answer 2

Có:

div.preformatted { 
    white-space: pre; 
    } 

tham khảo:

• white-space.

Answer 3

.preformatted { 
    white-space: pre-wrap; 
} 

Tôi nghĩ rằng "pre-wrap" là tốt hơn. Nó có thể giúp với chiều dài dài trong dòng.

Answer 4

để nhận <pre> bạn có thể sử dụng;

div.preformatted{ white-space: pre ; display: block; }