Visualizza elemento come testo preformattato tramite CSS

Question

Esiste un modo per emulare la visualizzazione di un elemento pre tramite CSS?

Ad esempio, posso mantenere lo spazio bianco intatto in questo div utilizzando una regola CSS?

<div class="preformatted"> 

    Please procure the following items: 

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

Answer 1

Usa white-space: pre preservare preformattazione spazi vuoti come nell'elemento pre. Per fare un ulteriore passo avanti, aggiungi anche font-family: monospace, poiché gli elementi pre di solito sono impostati in un carattere monospaziale per impostazione predefinita (ad esempio per l'uso con i blocchi di codice).

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

<div class="preformatted"> 
 

 
    Please procure the following items: 
 

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

Answer 2

Sì:

div.preformatted { 
    white-space: pre; 
    } 

Riferimento:

• white-space.

Answer 3

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

penso "pre-wrap" è meglio. Può aiutare a lungo in fila.

Answer 4

inorder per ottenere <pre> che è possibile utilizzare;

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