Rechercher : dans
Par :

Balise <pre>

Dernière réponse le 8 jan 2008 à 22:42:41 dcanl, le 6 oct 2007 à 09:23:24 
 Signaler ce message aux modérateurs

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

@+ Quand la merde tombe du ciel, le malchanceux n'a pas de chapeau.

Meilleures réponses pour « Balise
 » dans :
Les balises HTML Voir HTML, un langage à balises Le HTML n'est pas un langage de programmation. Il s'agit d'un langage permettant de décrire la mise en page et la forme d'un contenu rédigé en texte simple. Une page HTML est ainsi un simple fichier texte...
Les balises de style Voir Qu'est-ce qu'une balise de style? Les balises de style modifient la typographie du texte. Elles peuvent être imbriquées dans d'autres balises de style de la même façon qu'on le ferait avec un traitement de texte. Voici une liste de balises de...
Les balises dans la partie 'head' VoirAvant tout : rappel sur le doctype La partie head Balises meta Mots clés Description Déclaration de la langue du site Catégorie Auteur Restrictions pour les moteurs de recherche Adresse de la page Logiciels utilisés pour la...
[Site web] Vérifier, optimiser et nettoyer son code HTML VoirLes logiciels WYSIWYG de création de pages web produisent parfois du contenu HTML rempli de balises HTML inutiles, voire incompatibles avec les recommandations du W3C. Les outils proposés ci-dessous permettent de vérifier la validité du code HTML...
Les balises de structure VoirLes balises peuvent être réparties en 2 classes : celles qui modifient la structure de la page et celles qui modifient le style du texte. Parmi les balises de structure on trouve les en-têtes, les paragraphes, les listes ... Les attributs Les...
Introduction au HTML VoirPrésentation du HTML Le HTML (« HyperText Mark-Up Language ») est un langage dit de « marquage » (de « structuration » ou de « balisage ») dont le rôle est de formaliser l'écriture d'un document avec des balises de formatage. Les balises permettent...
Les classes de style (CSS) VoirLes classes et les ID Les classes Il peut s'avérer intéressant d'affecter des styles différents à des mêmes balises. Pour cela les spécifications CSS ont introduit le concept de classe. La définition des classes est aussi simple que celles des...

1

vignemail1, le 6 oct 2007 à 10:12:50

Regarde overflow comme propriété CSS

Répondre à vignemail1

2

Dalida, le 6 oct 2007 à 11:08:07

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;
}

[ Mathieu ]
"Les jeunes c'est l'insécurité
il faudrait tous les enfermer!" BxN 1985

Répondre à Dalida

3

dcanl, le 7 oct 2007 à 11:17:09

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 !
Quand la merde tombe du ciel, le malchanceux n'a pas de chapeau.

Répondre à dcanl

4

Ben__ , le 21 nov 2007 à 15:22:36

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

Répondre à Ben__

5

Azork, le 7 jan 2008 à 20:18:53

Salut,

sinon tu peux essayer ca

pre {

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

}


ciao !

Répondre à Azork

6

Ben__ , le 7 jan 2008 à 20:52:44

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é :)

Répondre à Ben__

7

dcanl, le 7 jan 2008 à 20:57:52

Erf non je crois que ça marchait pas...

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

@+ Quand la merde tombe du ciel, le malchanceux n'a pas de chapeau.

Répondre à dcanl

9

 dcanl, le 8 jan 2008 à 22:42:41

Je confirme, cela n'est pas suffisant pour moi, il me faut tout le code css indiqué au post 3.

@+ Quand la merde tombe du ciel, le malchanceux n'a pas de chapeau.

Répondre à dcanl

8

Gihef, le 8 jan 2008 à 22:32:51

Bonjour,

Juste pour le retrouver.

--

Répondre à Gihef
Collection CommentÇaMarche.net