Answers:
默认情况下,Textareas不应自动换行,但是您可以将wrap =“ soft”设置为显式禁用换行:
<textarea name="nowrap" cols="30" rows="3" wrap="soft"></textarea>
编辑:“包装”属性不受官方支持。我从德语的SELFHTML页面(这里是英文)获得了该页面,其中说IE 4.0和Netscape 2.0支持它。我还在FF 3.0.7中对其进行了测试,它可以按预期工作。事情发生了变化,SELFHTML现在是Wiki,英语源链接已消失。
EDIT2:如果要确保每个浏览器都支持它,则可以使用CSS更改换行行为:
使用级联样式表(CSS),您可以使用实现相同的效果
white-space: nowrap; overflow: auto;
。因此,wrap属性可以视为已过时。
从这里开始(似乎是一个很好的页面,其中包含有关textarea的信息)。
EDIT3:我不确定何时更改(根据评论,一定是在2014年左右),但是wrap
现在是官方的HTML5属性,请参阅w3schools。更改了答案以与此匹配。
white-space: pre;
(或pre-line
/ pre-wrap
)与wrap="off"
对我的影响相同(white-space: nowrap
但不尊重padding
)
wrap="off"
不再有效,但是IE和Edge都需要!
textarea {
white-space: pre;
overflow-wrap: normal;
overflow-x: scroll;
}
white-space: nowrap
如果您不关心空格,也可以使用它,但是如果您使用的是代码(或缩进的段落或可能故意存在多个空格的任何内容),那么您当然不希望这样做。所以我更喜欢pre
。
overflow-wrap: normal
(word-wrap
在较旧的浏览器中),以防某些父母更改了该设置;即使pre
已设置,也可能导致换行。
也-违背了当前接受的答案-文本域也往往默认包。pre-wrap
似乎是我的浏览器上的默认设置。
overflow-x: scroll
为overflow: auto
。滚动条减少了文本区域中的可用键入空间。同样,IE11不必要地以您的方式渲染了垂直滚动条,但已将overflow: auto
其修复。
以下基于CSS的解决方案适用于我:
<html>
<head>
<style type='text/css'>
textarea {
white-space: nowrap;
overflow: scroll;
overflow-y: hidden;
overflow-x: scroll;
overflow: -moz-scrollbars-horizontal;
}
</style>
</head>
<body>
<form>
<textarea>This is a long line of text for testing purposes...</textarea>
</form>
</body>
</html>
我找到了一种可以同时进行所有工作的文本区域的方法:
它适用于:
让我解释一下我是如何做到的:我使用的是Chrome inspector集成工具,并且看到了CSS样式上的值,因此我尝试使用这些值,而不是普通的值...试用和错误,直到将其减小到最小,然后在这里适合任何想要的人。
在CSS部分中,我仅将其用于Chrome,Firefox,Opera和Safari:
textarea {
white-space:nowrap;
overflow:scroll;
}
在CSS部分中,我仅将此用于IE:
textarea {
overflow:scroll;
}
这有点棘手,但是有CSS。
像这样的(x)HTML标记:
<textarea id="myTextarea" rows="10" cols="15"></textarea>
在本<head>
节的最后, 像这样的JavaScript:
window.onload=function(){
document.getElementById("myTextarea").wrap='off';
}
JavaScript用于使W3C验证器传递XHTML 1.1 Strict,因为wrap属性不是官方的,因此不能直接是(x)HTML标记,但是大多数浏览器都可以处理它,因此在加载页面后,它将设置该属性。
希望可以在更多的浏览器和版本上进行测试,并帮助某人进行改进,使其完全跨浏览器支持所有版本。
这个问题似乎是禁用textarea
包装最流行的问题。但是,自2017年4月起,我发现IE 11(11.0.9600)不会使用上述任何解决方案禁用自动换行。
在只有这确实工作IE 11的解决方案是wrap="off"
。 wrap="soft"
和/或各种CSS属性(如white-space: pre
alter,IE 11选择要包装的位置,但仍会包装在某个位置)。请注意,无论是否使用兼容性视图,我都对此进行了测试。IE 11非常兼容HTML 5,但在这种情况下不兼容。
因此,要实现保留空白并超出右侧的行,我正在使用:
<textarea style="white-space: pre; overflow: scroll;" wrap="off">
幸运的是,这似乎也适用于Chrome和Firefox。我并不是为使用HTML 5之前的版本辩护wrap="off"
,只是说它似乎是IE 11所必需的。
如果您可以使用JavaScript,则以下可能是当今使用最方便的选项(经过Firefox 31,Chrome 36测试):
contenteditable="true"
http://jsfiddle.net/cirosantilli/eaxgesoq/
<style>
div#editor {
white-space: pre;
word-wrap: normal;
overflow-x: scroll;
}
<style>
<div contenteditable="true"></div>
似乎没有标准的可移植CSS解决方案:
另外,如果可以使用Javascript,则最好使用ACE编辑器:
http://jsfiddle.net/cirosantilli/bL9vr8o8/
<script src="http://cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js"></script>
<div id="editor">content</div>
<script>
var editor = ace.edit('editor')
editor.renderer.setShowGutter(false)
</script>
可能与ACE一起使用textarea
,是因为它不使用未指定/不一致的实现,但不确定是否使用了ACE contenteditable
。