Balise <pre> [Résolu/Fermé]

Signaler
Messages postés
2997
Date d'inscription
mercredi 7 septembre 2005
Statut
Contributeur
Dernière intervention
3 juin 2013
-
 Jillian -
Bonjour,

Je souhaiterais afficher le contenu de fichiers texte sur une page web en conservant leur mise en forme (notamment l'alignement par tabulation).

Pour cela, il faut utiliser une police à pas fixe, ce que fait la balise <pre> (c'est ce qui est utilisé sur les forums de CCM pour les insertions de code).

Seulement voilà, si j'utilise cette balise, mon texte est certes conservé avec ses tabulations, mais il déborde à droite... Les lignes ne sont pas coupées.

Comment peut-on maitriser la largeur de cette balise ?? J'ai essayé en css avec width, max-width etc... Pas de résultat. Ca continue toujours à droite.

Comment fait Jeff ? (oui je sais, c'est pour ça qu'c'est l'chef ^^)

Merci

@+

7 réponses

Messages postés
4
Date d'inscription
samedi 24 mars 2007
Statut
Membre
Dernière intervention
7 janvier 2008
4
Salut, j'ai eu la même idée pour accélerer l'intégration de contenus dans un site, mais au bout de 36 essais de css
pre{
    white-space:pre-wrap; /* CSS 3 */
    white-space:-moz-pre-wrap; /* Mozilla depuis 1999 */
    white-space:-pre-wrap; /* Opera 4 à 6 */
    white-space:-o-pre-wrap; /* Opera 7 */
    word-wrap:break-word; /* IE 5.5+ */
    overflow:auto;/* IE 6 */
}
ET un vilain test de longueur *** ET un vilain test de longueur *** ET un vilain test de longueur *** ET un vilain test de longueur *** ET un vilain test de longueur ***

CF code d'ici
Cela ne fonctionne pas Sous IE
3
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 60511 internautes nous ont dit merci ce mois-ci

Messages postés
2997
Date d'inscription
mercredi 7 septembre 2005
Statut
Contributeur
Dernière intervention
3 juin 2013
456
Salut.

Alors après quelques bidouillages sur mon site et quelques recherches dans le code de CCM, voici ce qui fait ce que je veux :
white-space:pre-wrap;
white-space:-moz-pre-wrap;
white-space:-pre-wrap;
white-space:-o-pre-wrap;
word-wrap:break-word;
overflow:auto;

Du coup, je ne suis plus valide CSS... grmbl... A cause de ces propriétés :
white-space:-moz-pre-wrap;
white-space:-pre-wrap;
white-space:-o-pre-wrap;
word-wrap:break-word;

Mais si je ne les mets pas, ça fait n'importe quoi ! Alors bon... Tant pis ! Ce n'est que pour une page !

Merci à vous !

@+

PS : au passage, je conseille l'extension "Web Developer" pour Firefox ! C'est d'la bombe !
Messages postés
1
Date d'inscription
lundi 7 janvier 2008
Statut
Membre
Dernière intervention
7 janvier 2008
2
Salut,

sinon tu peux essayer ca

pre {

display:block;
Width: 510px; // tu peux definir la valeur que tu souhaites
overflow:hidden;

}


ciao !
Azork, tu es mon sauveur !
Messages postés
1246
Date d'inscription
vendredi 8 octobre 2004
Statut
Contributeur
Dernière intervention
13 septembre 2019
252
Regarde overflow comme propriété CSS
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
896
salut,

le code de Jeff :
forum.css (line 1626)
.bloc_25 pre.code {
overflow:auto;
white-space:-moz-pre-wrap;
}

ccm.css (line 68)
pre.code {
color:#526982;
font-family:"Courier New",Courier,mono;
min-height:30px;
overflow:auto;
white-space:-moz-pre-wrap;
}

Messages postés
4
Date d'inscription
samedi 24 mars 2007
Statut
Membre
Dernière intervention
7 janvier 2008
4
Ah ça j'ai fait un site entier sur cette base pour accélerer sa publication, j'en suis pas mécontent
pour info width est optionnel sur Firefox, donc seulement spécifié dans les CSS pour IE avec #width
et hop le tour est joué :)
Messages postés
2997
Date d'inscription
mercredi 7 septembre 2005
Statut
Contributeur
Dernière intervention
3 juin 2013
456
Erf non je crois que ça marchait pas...

Mais bon, merci quand même, maintenant j'ai réussi avec la methode ci-dessus !

@+
Messages postés
2997
Date d'inscription
mercredi 7 septembre 2005
Statut
Contributeur
Dernière intervention
3 juin 2013
456
Je confirme, cela n'est pas suffisant pour moi, il me faut tout le code css indiqué au post 3.

@+
Messages postés
5121
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
6 mars 2019
2 692
Bonjour,

Juste pour le retrouver.

--