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
source

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
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
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 安宇
source

5

Plus précisément, la propriété que vous regardez est:

white-space: pre

http://www.quirksmode.org/css/whitespace.html
http://www.w3.org/TR/CSS21/text.html#white-space-prop

— Sören Kuklau
source

2

Essaye ça

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

— Yanni
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
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.

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