Desbordamiento de CSS problema de Firefox

Question

Estoy tratando de escribir un CSS en el que cuando el usuario escribe texto y se desborda en lugar de tener una barra de desplazamiento u ocultarse, simplemente se cae como en un documento de Word normal más o menos. Tengo este código:

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

Lo extraño es que, si bien este código realmente hace lo que quiero en IE en Firefox, se desborda y se convierte en una barra de desplazamiento. He intentado desbordar: auto; desbordamiento: oculto; y desbordamiento: heredar; solo para ver si alguno ayudó pero hasta ahora no tuve suerte, y honestamente no tengo idea de por qué está sucediendo esto en Firefox, = / ¿alguno de ustedes lo sabría?

---

Actualización: Lo intenté con rebosadero: visible; pero solo obtengo el desbordamiento ... bien visible pero aún así no se envuelve. y SOLO en Firefox hasta ahora. = /

---

Actualización: Lo único que podría estar afectando es que tengo otro código CSS y el primero está contenido:

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

y el HTML que usa esto es:

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

Answer 1

Así que tu css probablemente esté bien. Por ejemplo, en mi página tengo css es así:

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

Luego en el cuerpo lo llamo así:

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

Funciona bien. Pero asegúrese de que cuando lo pruebe lo pruebe con algo como Lorem Ipsum, palabras con espacios y no una cadena larga como 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa' porque eso forzará una barra de desplazamiento probablemente. También revise su html y css para la validación .

Answer 2

Pruebe: desbordamiento: visible .

Answer 3

Debe haber más en la historia de lo que estás mostrando aquí. Utilicé el CSS proporcionado y veo el mismo comportamiento tanto en Internet Explorer como en Firefox. La página tiene 960 píxeles de ancho y cuando el ancho del navegador es menor que esto, se muestra una barra de desplazamiento horizontal.

Si especifica un ancho en un elemento, el navegador no lo representará por debajo de este valor. Si elimina la declaración de ancho de su ejemplo, el elemento solo se representará tan ancho como sea necesario.

Si esta no es la respuesta que está buscando, proporcione más código para darnos la imagen completa.

Answer 4

Agregue word-wrap: break-word; a su #content-text