questão CSS Overflow Firefox

Question

Eu estou tentando escrever um CSS em que quando o utilizador escreve texto e transborda em vez de ter uma barra de rolagem ou se esconder, ele só vai para baixo como em um documento do Word normal ou assim. Eu tenho esse 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;
}

O curioso, é que enquanto este código realmente faz o que eu quero no IE no Firefox transborda e se torna uma barra de rolagem. Eu tentei overflow: auto; overflow: hidden; e overflow: herdar; só para ver se qualquer ajudou, mas sem sorte até agora, e eu honestamente não tenho idéia de por que isso está acontecendo no Firefox, = / que qualquer um de vocês sabe?

---

Update: Eu tentei com overflow: visível; mas eu só pegar o estouro ... bem visível, mas ainda não envolve. e somente no Firefox até agora. = /

---

Update: A única outra coisa que poderia estar afetando é que eu tenho um outro código CSS ea primeira está contida:

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

e o HTML que usa isto é:

<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

Portanto, o seu css é provavelmente bem. Por exemplo na minha página eu tenho css é assim:

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

Em seguida, no corpo Eu chamo-lhe assim:

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

Ele funciona muito bem. Mas certifique-se quando você testá-lo você testá-lo com algo parecido com Lorem Ipsum, palavras com espaços e não uma longa seqüência como causa 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa', que irá forçar uma barra de rolagem, provavelmente. Também verifique o seu HTML e CSS para validação .

Answer 2

Tente:. overflow: visible

Answer 3

Deve haver mais para a história do que você está mostrando aqui. Eu usei o CSS fornecidos e eu estou vendo o mesmo comportamento no Internet Explorer e Firefox. A página é processada 960 pixels de largura e quando o navegador largura é menor que isso, uma barra de rolagem horizontal é processado.

Se você especificar uma largura de um elemento, o navegador não vai torná-lo menos do que esse valor. Se você remover a declaração de largura a partir do seu exemplo, o elemento só irá tornar tão grande como ele precisa.

Se esta não é a resposta que você está procurando, por favor, fornecer mais código para nos dar toda a imagem.

Answer 4

Add word-wrap: break-word; ao seu #content-text