Partager vos
astuces Bricolage
Posez votre question Signaler

Balise <pre> [Résolu]

dcanl 3027Messages postés 7 septembre 2005Date d'inscription 10 septembre 2011Dernière intervention - Dernière réponse le 24 juin 2011 à 16:12
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
@+
Lire la suite 

Balise <pre> »

10 réponses
Réponse
+2
moins plus
Ben__ 4Messages postés 24 mars 2007Date d'inscription 21 nov. 2007 à 15:22
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

 Ajouter un commentaire
Ajouter un commentaire
Réponse
+1
moins plus
vignemail1 1251Messages postés 8 septembre 2007Date d'inscription 4 novembre 2010Dernière intervention 6 oct. 2007 à 10:12
Regarde overflow comme propriété CSS

 Ajouter un commentaire - Site web
Ajouter un commentaire
Réponse
+1
moins plus
Dalida 6694Messages postés 3 mars 2007Date d'inscription 16 janvier 2011Dernière intervention 6 oct. 2007 à 11:08
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;
}


 Ajouter un commentaire - Site web
Ajouter un commentaire
Réponse
+1
moins plus
dcanl 3027Messages postés 7 septembre 2005Date d'inscription 10 septembre 2011Dernière intervention 7 oct. 2007 à 11:17
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 !

Ajouter un commentaire
Ajouter un commentaire
Réponse
+1
moins plus
Azork 1Messages postés 7 janvier 2008Date d'inscription 7 janv. 2008 à 20:18
Salut,

sinon tu peux essayer ca

pre {

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

}


ciao !

 Ajouter un commentaire
Jillian - 24 juin 2011 à 16:12
Azork, tu es mon sauveur !
Ajouter un commentaire
Réponse
+1
moins plus
Ben__ 4Messages postés 24 mars 2007Date d'inscription 7 janv. 2008 à 20:52
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é :)

 Ajouter un commentaire
dcanl - 7 janv. 2008 à 20:57
Erf non je crois que ça marchait pas...

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

@+
dcanl - 8 janv. 2008 à 22:42
Je confirme, cela n'est pas suffisant pour moi, il me faut tout le code css indiqué au post 3.

@+
Ajouter un commentaire
Réponse
+1
moins plus
Gihef 5246Messages postés 20 juillet 2005Date d'inscription 8 janv. 2008 à 22:32
Bonjour,

Juste pour le retrouver.

--

 Ajouter un commentaire
Ajouter un commentaire
Posez votre question
Ce document intitulé « Balise <pre> » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
5 extensions si vous voulez revenir à l'ancien Facebook