Comment puis-je envelopper le texte dans une pré-étiquette?

pre balises pre sont super utiles pour les blocs de code en HTML et pour le débogage lors de l’écriture de scripts, mais comment créer un retour à la ligne au lieu d’imprimer une longue ligne?

La réponse de cette page en CSS:

 pre { white-space: pre-wrap; /* Since CSS 2.1 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } 

Cela fonctionne très bien pour envelopper le texte et maintenir des espaces blancs dans le pre tag:

 pre{ white-space: pre-wrap; } 

J’ai trouvé que sauter la balise pre et utiliser un espace blanc: pré-envelopper sur une div est une meilleure solution.

  
content

Je suggère d’oublier le pré et de le mettre dans une zone de texte.

Votre retrait restra et votre code ne sera pas enroulé au milieu d’un chemin.

Plus facile de sélectionner la plage de texte dans une zone de texte si vous souhaitez copier dans le presse-papier.

Ce qui suit est un extrait php, donc si vous n’êtes pas en PHP, la façon dont vous remplissez les caractères spéciaux html variera.

  

Pour plus d’informations sur la façon de copier du texte dans le presse-papier en js, consultez: Comment copier dans le presse-papier en JavaScript? .

Toutefois…

Je viens d’inspecter les blocs de code stackoverflow et ils enveloppent dans une balise enveloppée dans la balise

 avec css ... 

 code { background-color: #EEEEEE; font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif; } pre { background-color: #EEEEEE; font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif; margin-bottom: 10px; max-height: 600px; overflow: auto; padding: 5px; width: auto; } 

De plus, le contenu des blocs de code stackoverflow est mis en évidence par la syntaxe (je pense) http://code.google.com/p/google-code-prettify/ .

C'est une bonne installation mais je vais juste avec textareas pour le moment.

C’est ce dont j’avais besoin. Il empêchait les mots de se briser mais autorisait la largeur dynamic dans la pré-zone.

 word-break: keep-all; 

J’ai combiné @richelectron et @ user1433454 réponses.
Cela fonctionne très bien et préserve la mise en forme du texte.

 
 

Tu peux soit:

 pre { white-space: normal; } 

maintenir la police monospace mais append un retour à la ligne ou:

 pre { overflow: auto; } 

ce qui permettra une taille fixe avec défilement horizontal pour les longues lignes.

Essaye ça

  pre { white-space: pre-wrap; /* CSS 3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ padding:0px; margin:0px } 

Essayez d’utiliser

 
.

Ou mieux jeter CSS.

Ce qui suit m’a aidé:

 pre { white-space: normal; word-wrap: break-word; } 

Merci

La méthode Best Cross Browser Way a fonctionné pour que j’obtienne des sauts de ligne et affiche le code ou le texte exact: (chrome, internet explorer, Firefox)

CSS:

 xmp{ white-space:pre-wrap; word-wrap:break-word; } 

HTML:

  your text or code  

Plus succinctement, cela oblige le contenu à envelopper une balise “pre” sans casser les mots. À votre santé!

 pre { white-space: pre-wrap; word-break: keep-all } 

Voir l’exemple en direct ici .

Le


-Element signifie "pré-formaté-texte" et est destiné à conserver la mise en forme du texte (ou autre) entre ses balises. Par conséquent, il n’est pas nécessaire d’avoir un retour automatique à la ligne ou des sauts de ligne dans


-Tag

Le texte d'un élément est affiché dans une police à largeur fixe (généralement Courier) et conserve à la fois les espaces et les sauts de ligne .

source: w3schools.com , souligne fait par moi-même.