HTML 文本区域水平滚动
我想为 HTML 页面中的文本区域提供水平滚动。 如果我输入没有换行符的长行,则滚动条应该显示而不换行。 一些朋友建议使用overflow-y CSS属性,这对我不起作用。 我使用的浏览器是 IE 6+ 和 Mozilla 3+。
I would like to provide a horizontal scroll to a textarea in my HTML page. The scroll should appear without wrapping, if I type a long line without a line break. A few friends suggested using overflow-y CSS attribute, which did not work for me. The browsers that I use are IE 6+ and Mozilla 3+.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
我想出了一种不符合 W3c 标准的方式,它可以在 IE 和 Firefox 中工作,顺便在 Chrome 中也可以工作。
我添加了属性
wrap
,其值为off
,即I figured out to do it in a non-W3c-compliant way and it is working in both IE and Firefox and incidentally in Chrome too.
I added the attribute
wrap
with valueoff
, that is<textarea cols=80 rows=12 wrap='off'>
is what I have done.要设置不换行,您可以使用:
对于其他值: https: //developer.mozilla.org/en-US/docs/Web/CSS/white-space
注意:然而,贬值的
wrap="off"
似乎是遗留的唯一方法浏览器支持。 尽管它不兼容 HTML 5,但如果您的目标是所有浏览器,它仍然是我的首选。To set no wrapping, you would use:
For other values: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
NOTE: However the depreciated
wrap="off"
seems to be the only way for legacy browser support. Though it isn't HTML 5 compliant, it's still my preference if you're targeting all browsers.如果您有包含 LF 的预格式化文本,则应将
white-space: pre;
添加到 css。 这将保留文本中已有的新行,并且不会换行长行。这适用于所有版本的 Firefox、所有基于 Webkit 的浏览器以及 IE6+。
来源:https://developer.mozilla.org/en-US /docs/Web/CSS/white-space
If you have pre-formatted text that includes LFs, you should add
white-space: pre;
to the css. That will preserve the new lines that are already in the text and will not wrap long lines.This works in all versions of Firefox, all Webkit-based browsers, and IE6+.
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
试试这些:
还应该有一个 -moz-scrollbars-horizontal
Try these:
there should also be a -moz-scrollbars-horizontal
使用
white-space: pre;
作为 CSS 属性。https://developer.mozilla.org/en-US/文档/Web/CSS/空白
Use
white-space: pre;
as CSS property.https://developer.mozilla.org/en-US/docs/Web/CSS/white-space