避免 textarea 文本上的行 returns

Question

我的 <textarea> 标签中的文本有问题。事情是这样的：

我的网络应用程序是一个 html 页面，它在单击按钮时在 textarea 上写入文本。当您单击此按钮时，<textarea> 显示如下：

如你所见，我用红色下划线标出了这件事。我的 <textarea> 获得了一些显示 2 个滚动条的 css 属性（见下文）。我虽然文本不会 return 在新行中，即使有宽度（这是 100% 因为它包含在 table-cell 中）。

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

Html 文本区域代码：

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

文本区域的样式：

#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" 因为我有一个 table 其中包含最多 6 个单元格的行。

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

Answer 1

需要在textarea中添加HTML属性wrap="off"并添加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。

避免 textarea 文本上的行 returns

Avoid line returns on textarea text

html

css

textarea