Balise <pre> en HTML avec largeur fixe

Question

J'utilise le <pre> pour afficher du texte préformaté (y compris les sauts de ligne, les espaces et les tabulations, etc.) Mais les grandes lignes sans saut de ligne sont affichées sur une seule ligne et une barre de défilement est ajoutée.

Je veux limiter la largeur de la <pre> (de sorte que les grandes lignes sont interrompues pour arriver à de nouvelles lignes et qu'aucun défilement n'est nécessaire. Est-ce possible ou existe-t-il une autre balise que je peux utiliser ?

Le code est quelque chose comme :

$.post("contr.php", q1, function(data) {
    $("#el_text").html("< pre>"+data+"< /pre>");
});

Answer 1

Une manière exhaustive de le prendre en charge dans presque tous les navigateurs :

pre {
    white-space: -moz-pre-wrap; /* Mozilla, supported since 1999 */
    white-space: -pre-wrap; /* Opera */
    white-space: -o-pre-wrap; /* Opera */
    white-space: pre-wrap; /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */
    word-wrap: break-word; /* IE 5.5+ */
}

J'ai eu le même problème il n'y a pas longtemps et j'avais trouvé la solution ici : http://codingforums.com/showthread.php?t=43293

Answer 2

pre{
    white-space:pre-wrap;
}

fait ce que vous voulez dans Firefox et Chrome - enveloppe les lignes mais préserve les espaces blancs. Mais malheureusement, IE ne semble pas le supporter (bien que je n'aie pas encore regardé dans IE8).

Edit : IE8 le soutient .

Answer 3

Si l'espace est alloué à droite du bloc même après avoir fait ce que Karim a dit Alors peut-être que vous avez enfermé à l'intérieur .

La balise Table alloue de l'espace à l'ensemble de la pré-chaîne, même si le contenu peut faire l'objet d'un retour à la ligne, ce qui entraîne des zones vides à droite du bloc pré.

Dans ce cas, remplacez-la par une autre balise, comme div ou paragraphe.