[résolu] Code qui déborde de son contenant?

Bonjour,

Je réalise quelques testes et il y en à un qui me torture les neurones .

Soit le style suivant :

#cadre{
width:600px;
height:auto;
background:yellow;
padding:5px;
}
#php{
width:550px;
border:1px solid green;
}

Associé au html suivant (+coloration syntaxique):

<div id="cadre">
<pre id="php"><span
 style="color: rgb(0, 0, 0); font-weight: bold;">&lt;?php</span><br><span
 style="color: rgb(0, 0, 255);">$article_aleatoire</span> = <span
 style="color: rgb(0, 0, 102);">mysql_query</span><span
 style="color: rgb(102, 204, 102);">(</span><span
 style="color: rgb(255, 0, 0);">"SELECT id, titre,id_categorie FROM CONTENU WHERE id_categorie='"</span>.<span
 style="color: rgb(0, 0, 102);">mysql_real_escape_string</span><span
 style="color: rgb(102, 204, 102);">(</span><span
 style="color: rgb(0, 0, 255);">$id_categorie</span><span
 style="color: rgb(102, 204, 102);">)</span>.<span
 style="color: rgb(255, 0, 0);">"' AND id!='"</span>.<span
 style="color: rgb(0, 0, 102);">mysql_real_escape_string</span><span
 style="color: rgb(102, 204, 102);">(</span><span
 style="color: rgb(0, 0, 255);">$id_transmit</span><span
 style="color: rgb(102, 204, 102);">)</span>.<span
 style="color: rgb(255, 0, 0);">"' ORDER BY RAND() LIMIT 5"</span><span
 style="color: rgb(102, 204, 102);">)</span>;<br><span
 style="color: rgb(128, 128, 128); font-style: italic;"></span><span
 style="color: rgb(0, 0, 0); font-weight: bold;">?&gt;</span></pre>
</div>

Dans ce cas de figure, le code contenu entre les tags « pre » contenu lui même dans un div dont la longueur est fixe sort de son flux et je ne parviens pas à faire en sorte que celui-ci ne dépasse pas. La seule solution que j'ai trouvé est d'ajouté un « overflow:auto; » au #cadre mais le rendu est tout moche à cause du scroll.

Avez vous des suggestions pour remédier à cela?

Merci
Modifié par tryan (29 Mar 2011 - 10:39)

Bonjour,

Ajoute ceci dans le CSS de #php :

 white-space: pre-wrap;       /* css-3 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */

Cordialement

Bonjour,

Bhaa la ça me trou le derrière .. je ne savais même pas que ce genre de propriété existait.
J'ai testé sous IE8, FF et Chrome et ça passe nickel.

Grand merci lddsoft