Проблема с переполнением 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, слова с пробелами, а не одну длинную строку типа "ааааааааааааааааааааааааааааааа", потому что это, вероятно, вызовет полосу прокрутки.Также проверьте свой html и css на валидация.

Answer 2

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

Answer 3

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

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

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

Answer 4

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