Problème de débordement de CSS avec Firefox

StackOverflow https://stackoverflow.com/questions/415065

  •  03-07-2019
  •  | 
  •  

Question

J'essaie d'écrire un CSS dans lequel, lorsque l'utilisateur écrit du texte et qu'il déborde, au lieu d'avoir une barre de défilement ou de se cacher, tout se passe comme dans un document Word normal. J'ai ce code: 

#content-text {
    width: 960px;
    padding-left: 10px;
    padding-right:10px;
    text-align: left;
    color:#000;
    height:100%;
    margin-left: 25px;
    margin-right:25px;
}

Ce qui est étrange, c'est que même si ce code fait ce que je veux dans IE dans Firefox, il déborde et devient une barre de défilement. J'ai essayé le débordement: auto; débordement caché; et débordement: hériter; Juste pour voir si quelque chose vous a aidé, mais pas de chance jusqu'à présent, et honnêtement, je n'ai aucune idée de la raison pour laquelle cela se produit dans Firefox, = / est-ce que certains d'entre vous le savent?

Mise à jour: J'ai essayé avec débordement: visible; mais je viens de recevoir le débordement ... bien visible mais toujours pas enveloppé. et UNIQUEMENT dans Firefox jusqu'à présent. = /

Mise à jour: La seule autre chose qui pourrait affecter, c’est que j’ai un autre code CSS et que le premier soit contenu: 

#content-title{
    background-color: transparent;
    background-image: url(../img/content-title-body.png);
    background-repeat: repeat-y;
    background-attachment: scroll;
    background-x-position: 0%;
    background-y-position: 0%;
    height:auto;
    position:absolute;
    z-index :100; /* ensure the content-title is on top of navigation area */
    width:1026px;/*1050px*/
    margin: 160px 100px 5px 100px;
    overflow: visible;
    top: 55px;
}

et le code HTML qui l'utilise est: 

<div id="content-title">
                <div id="content-text">             Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!<p>Hola!Hola!Hola!Hola!Hola!Hola!<p>Hola!Hola!Hola!Hola!<p>Hola!Hola!Hola!Hola!<p>Hola!Hola!Hola!<p>Hola!Hola!Hola!Hola!<p>Hola!Hola! 
        </div>
</div>
Était-ce utile?

La solution

Votre css va probablement bien. Par exemple, sur ma page, css est comme ceci: 

 textarea.input_field2 {
    margin: 10px 10px 10px 0px;
    width: 440px;
    height: 150px;
    background:#696969; 
    color: white;
    border: none;
    font-size: 14px;
    text-align: left;
    vertical-align: middle;
    }

Ensuite, dans le corps, je l'appelle comme suit: 

 <textarea rows="9" cols="9" class="input_field2" name="user_comments"></textarea>

Cela fonctionne bien. Mais assurez-vous que lorsque vous le testez, vous le testez avec quelque chose comme Lorem Ipsum, des mots avec des espaces et pas une longue chaîne comme 'aaaaaaaaaaaaaaaaaaaaaaaaaaaa' car cela forcera probablement une barre de défilement. Vérifiez également vos html et css pour la validation .

Autres conseils

Il doit y avoir plus dans l'histoire que ce que vous montrez ici. J'ai utilisé le CSS fourni et je constate le même comportement dans Internet Explorer et Firefox. La page est rendue avec une largeur de 960 pixels et lorsque la largeur du navigateur est inférieure à celle-ci, une barre de défilement horizontale est rendue.

Si vous spécifiez une largeur sur un élément, le navigateur ne la rendra pas inférieure à cette valeur. Si vous supprimez la déclaration de largeur de votre exemple, l'élément ne restituera que la largeur nécessaire.

Si ce n'est pas la réponse que vous recherchez, veuillez fournir plus de code pour nous donner une image complète.

Ajoutez word-wrap: break-word; à votre # contenu-texte

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top