CSS Overflow Firefox问题

Question

我正在尝试编写一个CSS，在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;
}

奇怪的是，尽管这段代码实际上完成了我在Firefox中的IE中想要的操作，但它溢出并变成滚动条。 我试过了overflow：auto; 溢出：隐藏 和溢出：继承； 只是为了看看到目前为止是否有帮助，但是没有运气，老实说，我不知道为什么这会在Firefox中发生，= /你们中有人知道吗？

---

更新：我试着用overflow：visible; 但是我只是得到了溢出...很明显，但仍然没有包裹。 到目前为止，仅在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

尝试： overflow: visible 。

Answer 2

因此，您的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 3

故事的内容肯定不止您在此显示的内容。 我使用了提供的CSS，并且在Internet Explorer和Firefox中都看到了相同的行为。 页面呈现960像素宽，当浏览器宽度小于此宽度时，呈现水平滚动条。

如果您在元素上指定宽度，则浏览器不会将其呈现为小于此值。 如果从示例中删除宽度声明，则该元素将仅根据需要渲染。

如果这不是您想要的答案，请提供更多代码以给我们提供完整的图片。

Answer 4

添加word-wrap: break-word; 到您的#content-text