Comment changer un span pour qu'il ressemble à un pré avec CSS?

108

Est-il possible de changer une <span>balise (ou <div>) pour préformater son contenu comme une <pre>balise le ferait en utilisant uniquement CSS?

html css jsight
la source

Réponses:

164

Regardez la feuille de style par défaut du W3C CSS2.1 ou le brouillon de travail CSS2.2 . Copiez tous les paramètres de PRE et mettez-les dans votre propre classe.

pre {
    display: block;
    unicode-bidi: embed;
    font-family: monospace;
    white-space: pre;
}
Diodeus - James MacFarlane
la source
1
C'est une bonne idée de le faire de cette façon afin de comprendre d'où viennent ces défauts.
Diodeus - James MacFarlane
2
Lorsque j'essaye cela, les sauts de ligne ne sont pas conservés.
Agnel Kurian
La balise <pre> affichera des barres de défilement horizontales lorsque le texte est trop large, mais ce css ne le fera pas. Quelqu'un sait comment les montrer?
shindigo
1
@shindigo Avez-vous essayé d'utiliser overflow: scroll? Ou si vous ne voulez que le défilement horizontal overflow-x: scroll developer.mozilla.org/en-US/docs/Web/CSS/overflow
Kanmuri
1
@shindigo overflow: auto;peut être mieux sinon vous pourriez vous retrouver avec deux jeux de barres de défilement lorsque vous n'en avez pas besoin.
Spechal
57

Voir la propriété CSS d'espace blanc .

.like-pre { white-space: pre; }
Pistos
la source
7
alternativement, vous pouvez trouver white-space: pre-wraputile. Il se comporte comme pre, mais enveloppe de longues lignes.
Kai Carver
25

Cela fait ressembler un SPAN à un PRE:

span {
  white-space: pre;
  font-family: monospace;
  display: block;
}

N'oubliez pas de modifier le sélecteur css le cas échéant.

M. brillant et nouveau 安 宇
la source
2

Essaye ça

span {
    white-space: pre;
    font-family: monospace;
    display: block;
    unicode-bidi: embed
}
Yanni
la source
1

Essayez ce style

.pre {

white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
line-height: 1.5;   
word-break: break-all;
white-space: pre;
white-space: pre\9; /* IE7+ */
display: block;
}

Utilisé le même ici - http://www.makemyshop.in/

Yesu Raj
la source
0

Pourquoi ne pas utiliser simplement la balise <pre> au lieu de la balise span? Les deux sont en ligne, donc les deux doivent se comporter comme vous le souhaitez. Si vous rencontrez un problème en remplaçant la définition entière de <pre>, donnez-lui simplement une classe / un identifiant.


la source
1
Parfois, vous avez déjà une étendue sur une page et ne pouvez pas la modifier, comme si elle faisait partie d'un système CMS existant.
Mr. Shiny and New 安 宇
B / c le framework refuse de mettre le contenu sous mon <pre> comme je le demande. Je pourrais contourner ce problème, mais c'est beaucoup plus difficile que de simplement définir quelques accessoires CSS.
jsight