如何水平滚动文本区域？

Question

如何水平滚动文字区域？我用谷歌搜索但找不到一个好的解决方案。

我尝试了以下css，但它无效。

overflow-x: scroll;

<textarea></textarea>

Answer 1

将以下行添加到CSS：

white-space: nowrap; /* will prevent the default wrapping of text to next line */
overflow-x: auto; /* will make horizontal scroll-bar appear only when needed */

Demo Fiddle

Answer 2

white-space: nowrap的问题是故意换行（\n）也会停止工作。

一个更好的解决方案，至少在最后一个Chrome中有效

white-space: pre;

阻止换行（允许水平滚动），但\n将继续工作

Answer 3

试试这个：

textarea {
   overflow-x: vertical;
}

Answer 4

你这样做有点不对。

overflow-x: scroll;

当文本高度超出限制时，将在textarea内创建滚动条以滚动。

为此，CSS子句是：

resize: vertical;

这将让用户垂直调整元素大小。