如何删除文字包装从文本区？

当文本溢出时，我的简单文本区域不显示水平条。它为新行包装文本。那么，当文本溢出时，如何删除文字包装并显示水平栏呢？

148056 次浏览
小开
最佳答案

文本区域在默认情况下不应该换行，但是您可以设置 wrash = “ soft”来显式禁用换行:

<textarea name="nowrap" cols="30" rows="3" wrap="soft"></textarea>

编辑: 官方不支持“ wrash”属性。我得到它从 德国的 SELFHTML 页面(一个英文来源是 给你)说，IE 4.0和网景2.0支持它。我还在 FF 3.0.7中测试了它的工作原理。事情已经发生了变化，SELFHTML 现在是一个 wiki，而英文源链接已经死了。

编辑2: 如果你想确保每个浏览器都支持它，你可以使用 CSS 来改变包装行为:

使用层叠样式表(CSS) ，你也可以达到同样的效果 white-space: nowrap; overflow: auto;. 因此，回绕属性可以被认为是过时的。

来自 给你(似乎是一个关于文本区的信息优秀的页面)。

编辑3: 我不确定它是什么时候改变的(根据评论，一定是在2014年左右) ，但是 wrap现在是一个官方的 HTML5属性，参见 W3学校。将答案更改为与此相匹配。

小开

以下基于 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 15.0.874.120
  • Firefox 7.0.1
  • 歌剧11.52(1100)
  • Safari 5.1(7534.50)
  • IE 8.0.6001.18702

让我来解释一下我是如何做到这一点的: 我使用的是 Chrome 检查器集成工具，我看到了 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，因为包装属性是非官方的，因此不能直接成为(x) HTML 标记，但是大多数浏览器都会处理它，所以在加载页面之后，它会设置该属性。

希望可以在更多的浏览器和版本上进行测试，并帮助有人改进它，使它完全跨浏览器的所有版本。

小开 
textarea {
white-space: pre;
overflow-wrap: normal;
overflow-x: scroll;
}

如果你不在乎空格，那么 white-space: nowrap也可以工作，但是当然你也不想在处理代码(或者缩进的段落或者任何可能有多个空格的内容)的时候工作... ... 所以我更喜欢 pre。

overflow-wrap: normal(在旧的浏览器中是 word-wrap)是必需的，以防某些父浏览器更改了该设置; 即使设置了 pre，它也可能导致包装。

另外，与目前接受的答案相反，textarea做通常默认包装。pre-wrap似乎是我浏览器的默认值。

小开

如果你可以使用 JavaScript，以下可能是今天最便携的选项(测试过的 Firefox 31，Chrome 36) :

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，也没有指定/不一致的实现，但是不确定它是否使用 contenteditable。

小开

这个问题似乎是最流行的一个禁用 textarea包装。然而，截至2017年4月，我发现 IE 11(11.0.9600)将使用上述任何解决方案禁用字包装。

对 IE11有效的 只有解决方案是 wrap="off"。wrap="soft"和/或各种 CSS 属性(如 white-space: pre)会改变 IE 11选择包装的位置，但仍然会包装某处。请注意，我已经测试了这与或没有 兼容性视图。IE11非常兼容 HTML 5，但是在这种情况下不兼容。

因此，为了实现保留空格并偏离右侧的行，我使用:

<textarea style="white-space: pre; overflow: scroll;" wrap="off">

幸运的是，这似乎也适用于 Chrome 和 Firefox。我不是在为 HTML5wrap="off"之前的使用辩护，只是说它似乎是 IE11所必需的。


提交答案