Sto*_*art 138 html textarea word-wrap
当文本溢出时,我的简单textarea不显示水平条.它包装新行的文本.那么当文本溢出时,如何删除wordwrap并显示水平条？
Par*_*udy 149
textarea {
white-space: pre;
overflow-wrap: normal;
overflow-x: scroll;
}
white-space: nowrap如果你不关心空格,也可以工作,当然如果你正在使用代码(或缩进的段落或任何可能故意存在多个空格的内容),你当然不希望这样......所以我更喜欢pre.
overflow-wrap: normalword-wrap如果某些父级已更改该设置,则需要(在较旧的浏览器中); 它即使pre被设置也会导致包装.
也-违背了当前接受的答案-文本域也往往默认包.pre-wrap似乎是我浏览器的默认设置.
sch*_*der 136
Textareas默认情况下不应该换行,但你可以设置wrap ="soft"来显式禁用换行:
<textarea name="nowrap" cols="30" rows="3" wrap="soft"></textarea>
编辑:"wrap"属性不受官方支持.我从德国的SELFHTML页面(英文源码在这里)得到它,说IE 4.0和Netscape 2.0支持它.我还在FF 3.0.7中对它进行了测试.事情发生了变化,SELFHTML现在是一个维基,英语源链接已经死了.
编辑2:如果你想确保每个浏览器都支持它,你可以使用CSS来改变换行行为:
使用层叠样式表(CSS),您可以实现相同的效果
white-space: nowrap; overflow: auto;.因此,wrap属性可以被认为是过时的.
从这里(似乎是一个关于textarea信息的优秀页面).
编辑3:我不确定它何时发生变化(根据评论,一定是2014年左右),但wrap现在是HTML5的官方属性,请参阅w3schools.更改了答案以匹配此项.
Gal*_*mon 19
以下基于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>
z66*_*66z 14
我找到了一种方法来制作一个textarea,所有这些同时工作:
它运作良好:
让我解释一下我是如何做到的:我正在使用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 Strict,因为wrap属性不是官方的,因此不能直接成为(x)HTML标记,但是大多数浏览器都处理它,所以在加载页面后它设置了该属性.
希望这可以在更多浏览器和版本上进行测试,并帮助某人改进它并使其完全跨浏览器适用于所有版本.
这个问题似乎是禁用textarea换行的最受欢迎的问题。但是，截至 2017 年 4 月，我发现IE 11 (11.0.9600)不会使用上述任何解决方案禁用自动换行。
适用于 IE 11的唯一解决方案是wrap="off". wrap="soft"和/或各种 CSS 属性，例如white-space: pre改变 IE 11 选择包装的位置，但它仍然包装在某处。请注意，无论是否使用Compatibility View，我都对此进行了测试。IE 11 与 HTML 5 非常兼容，但在这种情况下不兼容。
因此，为了实现保留空格并离开右侧的行，我正在使用：
<textarea style="white-space: pre; overflow: scroll;" wrap="off">
幸运的是，这似乎也适用于 Chrome 和 Firefox。我不是在为 pre-HTML 5 的使用辩护wrap="off"，只是说它似乎是 IE 11 所必需的。