Textarea horiz.滚动条不适用

Question

我有一个包含代码的textarea.问题是,为了使它看起来不错,Textarea必须停止包装文本,而是使用水平滚动条.

我试过这个:

textarea
{
    overflow: scroll;
    overflow-y: scroll;
    overflow-x: scroll;
    overflow:-moz-scrollbars-horizontal;

}

还有这个:

textarea
{

    overflow: auto;
    overflow-y: scroll;
    overflow-x: scroll;
    overflow:-moz-scrollbars-horizontal;

}

但是水平滚动条没有应用.

这样做的正确方法是什么？

Answer 1

将wrap属性设置为off

<textarea wrap="off"></textarea>

演示:http://jsfiddle.net/wesley_murch/HZkLK/

还有一个soft和hard有价值的wrap.我在tizag.com上找到了唯一不错的参考资料,尽管那里肯定有更好的参考资料.从链接页面:

wrap属性指的是文本到达文本字段中每行结尾时的反应方式.包装可以是以下三种设置之一:

soft
hard
off

Soft会强制单词在文本区域内包装一次,但在提交表单时,单词将不再显示(不会添加换行符).

硬包装文本框内的单词并在每行的末尾放置换行符,以便在提交表单时,它显示与文本框中的完全相同.

Off设置textarea以忽略所有包装并将文本放入一个正在进行的行中.

我不确定HTML5,但这不会在XHTML或HTML4中验证(验证器告诉我:没有属性"WRAP"),但它确实似乎在我检查的以下浏览器中工作:

• Firefox 4
• IE6,IE7,IE8
• Chrome 10
• 歌剧11
• Safari 5.0.3

我不认为这可以用CSS进行跨浏览器.我来了短试图找到这个官方的文档/支,而当我做了找到一些有用的东西,就在这里堆栈溢出!

有关详细信息,请参阅此答案:

如何从textarea中删除自动换行？

但是,在Firefox 4上提供的CSS解决方案对我不起作用...