barre de défilement horizontale

Comment puis-je faire une automatique de la barre de défilement horizontale dans ma page si le contenu déborde de ses frontières.

<html>
     <body>
        <div style ="width: 20px; height:30px; border:1px solid black; overflow:auto">
            <!-- various of text here that can makes it go out the border-->
        </div>  
     </body>
</html>

Que si le texte de mon contenu est trop long, comment puis-je faire une automatique de la barre de défilement horizontale?

InformationsquelleAutor ggcodes | 2012-12-18
  1. 9

    changer votre code dans cette: 

     <html>
 <body>
    <div style ="width: 20px; height:30px; border:1px solid black; overflow-x:scroll">
        <!-- various of text here that can makes it go out the border-->
    </div>  
 </body>
 </html>
    InformationsquelleAutor SyntaxError
  2. 11

    Insérer dans le div style :

    overflow-x:scroll;
    • w3schools note que cela ne fonctionne pas correctement sur internet explorer 8.0 et versions antérieures.
    • est-il d'autre moyen que cela fonctionne également dans IE
    • hors-sujet: merci de lire ceci avant de référencer ce site à nouveau
    InformationsquelleAutor onimojo
  3. 3
    overflow: auto;
white-space: nowrap;

    http://jsfiddle.net/GCPDE/

    InformationsquelleAutor clyfish
  4. 1

    À changer de style pour cette:

    style="width: 20px; height:30px; border:1px solid black; overflow:auto;"

    Juste une affaire de syntaxe incorrecte.

    • Eh bien, on dirait la version modifiée de l'original de votre post est désormais correcte.
    • Oh, j'ai édité la question - je pensais que c'était une faute de frappe et non pas le code exact.
    • Ne vous inquiétez pas 🙂
    • 🙂 Encore, je pense que white-space: nowrap doit être ajouté là...
    • D'accord, je pense que je vais le laisser, depuis clyfish a déjà ajouté ci-dessus.
    • Yup, lui a donné un upvote.

    InformationsquelleAutor sooper
  5. 0

    REMARQUE: afin de rendre le texte défilement horizontal, vous aurez à ajouter
    overflow-x:scroll; overflow-y: hidden; white-space: nowrap; à votre div.

    HTML:

    <html>
     <body>
        <div style ="width:20px; height:30px; border:1px solid black; overflow-x:scroll; overflow-y:hidden; white-space:nowrap;">
            <!-- various of text here that can makes it go out the border-->
        </div>  
     </body>
</html>

    InformationsquelleAutor Rahul Mehra