避免在textarea文本上返回行

Question

我的<textarea>标记中的文字存在问题。问题是：

我的网络应用是一个html页面，在按钮点击时在textarea上写文字。当您单击此按钮时，<textarea>显示的内容如下：

正如你所看到的，我用红色标出了这个问题。我的<textarea>获得了一些显示2个滚动条的css propreties（见下文）。我虽然文本也不会返回一个新行，即使是宽度（100%，因为它包含在table-cell中）。

问题：如何避免这种行为，这意味着文本如何保持在一行中，无论其长度如何，以允许用户使用bottom-scroll来查看隐藏的字符？< / p>

textarea的Html代码：

<table>
    <!-- some rows and cells -->
    <tr>
        <td id = "content_form_HTMLgenerated" colspan = "6">
            <textarea id = "content_form_HTMLgenerated_textarea"></textarea>
        </td>
    </tr>
</table>

textarea的样式：

#content_form_HTMLgenerated {

}

#content_form_HTMLgenerated_textarea {
    width               : 100%;
    height              : 400px;
    resize              : none;
    border              : solid 1px rgba(0, 180, 255, 0.5);
    padding             : 10px;
    overflow-y          : scroll;
    overflow-x          : scroll;
    white-space         : nowrap;
}

N.B。：我使用colspan = "6"因为我有一个包含最多6个单元格的行的表。

N.B.2：浏览器：FireFox 31.4.0

Answer 1

需要在wrap="off"中添加HTML属性textarea并添加overflow:auto。

点击此处

HTML

<table>
    <!-- some rows and cells -->
    <tr>
        <td id="content_form_HTMLgenerated" colspan="6">
            <textarea wrap="off" id="content_form_HTMLgenerated_textarea"></textarea>
        </td>
    </tr>
</table>

CSS

#content_form_HTMLgenerated_textarea {
    width : 100%;
    height : 80px;
    resize : none;
    border : solid 1px rgba(0, 180, 255, 0.5);
    padding : 10px;
    overflow: auto;
    white-space : nowrap;
}

在FIDDLE

中查看

另请参阅previous answer。