CSS переполнение Firefox проблема

Question

Я пытаюсь написать CSS, в котором, когда пользователь пишет текст, и он переполняется, вместо того чтобы иметь полосу прокрутки или скрытие, он просто падает как в обычном документе Word или около того. У меня есть этот код:

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

Странно то, что хотя этот код и делает то, что я хочу в IE в Firefox, он переполняется и становится полосой прокрутки. Я пробовал переполнение: авто; переполнение: скрытый; и переполнение: наследовать; просто чтобы посмотреть, помогли ли они, но пока не повезло, и я, честно говоря, понятия не имею, почему это происходит в Firefox, = / кто-нибудь из вас знает?

---

Обновление: Я пытался с переполнением: видимый; но я просто получаю переполнение ... хорошо видно, но все равно оно не оборачивается. и пока ТОЛЬКО в Firefox. = /

---

Обновление: Единственное, что может повлиять, это то, что у меня есть другой код CSS, и первый содержится:

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

и HTML, который использует это:

<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

Итак, ваш css, вероятно, в порядке. Например, на моей странице у меня есть css:

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

Тогда в теле я называю это так:

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

Работает нормально. Но убедитесь, что когда вы тестируете его, вы тестируете его с помощью чего-то вроде Lorem Ipsum, слов с пробелами, а не одной длинной строки, такой как 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa', потому что это, вероятно, вызовет полосу прокрутки. Также проверьте ваши HTML и CSS для проверки .

Answer 2

Попробуйте: overflow: visible.

Answer 3

Добавьте word-wrap: break-word; к вашему #content-text

Answer 4

В истории должно быть что-то большее, чем вы показываете здесь. Я использовал предоставленный CSS, и я вижу одинаковое поведение как в Internet Explorer, так и в Firefox. Страница отображается шириной 960 пикселей, а когда ширина браузера меньше этой, отображается горизонтальная полоса прокрутки.

Если вы укажете ширину элемента, браузер не будет отображать его меньше этого значения. Если вы удалите объявление ширины из вашего примера, элемент будет отображаться только настолько широко, насколько это необходимо.

Если это не тот ответ, который вы ищете, пожалуйста, предоставьте больше кода, чтобы дать нам полную картину.