CSS-Überlauf Firefox Problem

Question

Ich versuche, eine CSS, in dem zu schreiben, wenn der Benutzer Text schreibt und er überläuft, anstatt eine Scrollbar oder versteckt zu haben, geht es wie in einem normalen Word-Dokument oder so. Ich habe diesen Code:

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

Das Seltsame ist, dass während dieser Code tatsächlich tut, was ich im Internet Explorer in Firefox wollen sie überläuft und wird eine Bildlaufleiste. Ich habe versucht, Überlauf: auto; Überlauf versteckt; und Überlauf: erben; nur um zu sehen, wenn jeder hilft aber kein Glück so weit, und ich habe ehrlich gesagt keine Ahnung, warum ist das passiert in Firefox, = / würde jeder von Ihnen weiß?

---

Update: Ich habe versucht, mit Überlauf: sichtbar; aber ich habe nur den Überlauf ... gut sichtbar, aber immer noch nicht wahr Wraps. und nur in Firefox so weit. = /

---

Update: Die einzige andere Sache, die beeinflussen könnte, ist, dass ich einen anderen CSS-Code haben und die erste enthalten:

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

und der HTML-Code, das ist verwendet:

<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

So Ihre CSS ist wahrscheinlich in Ordnung. Zum Beispiel auf meiner Seite Ich habe CSS ist wie folgt:

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

Dann im Körper ich es aufrufen wie folgt aus:

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

Es funktioniert gut. Aber stellen Sie sicher, wenn Sie es testen, testen Sie es mit so etwas wie Lorem Ipsum, Wörter mit Leerzeichen und nicht eine lange Zeichenfolge wie ‚aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa‘ Ursache, die eine Bildlaufleiste zwingen wird, wahrscheinlich. Auch Ihre HTML und CSS überprüfen Validierung .

Answer 2

Versuchen:. overflow: visible

Answer 3

Es muss mehr auf die Geschichte sein, als Sie hier zeigen. Früher habe ich die CSS zur Verfügung gestellt und ich das gleiche Verhalten in Internet Explorer und Firefox zu sehen. Die Seite wird gerendert 960 Pixel breit und wenn die Browser Breite kleiner als diese, eine horizontale Bildlaufleiste gemacht wird.

Wenn Sie eine Breite auf einem Elemente angeben, wird der Browser geht machen nicht weniger als dieser Wert. Wenn Sie die Breite Erklärung aus Ihrem Beispiel entfernen, wird das Element nur so breit machen, wie es muss.

Wenn dies nicht die Antwort, die Sie suchen, benutzen Sie bitte mehr Code geben uns das ganze Bild zu geben.

Answer 4

In word-wrap: break-word; auf Ihre #content-text