当前位置：文江博客话题详情

如何从文本区域中删除自动换行？

发布于 2024-07-16 05:23:48 字数 64 浏览 7 评论 0原文

当文本溢出时，我的简单文本区域不显示水平条。它将文本换行。那么当文本溢出时如何去除自动换行并显示水平条呢？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不打扰别人 2024-07-23 05:23:48

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

如果您不关心空格，则 white-space: nowrap 也可以工作，但是如果您正在使用代码（或缩进的段落或任何可能故意存在的内容），您当然不希望这样是多个空格）...所以我更喜欢 pre。

需要overflow-wrap：normal（在旧版浏览器中是word-wrap），以防某些家长更改了该设置；即使设置了 pre，它也可能导致换行。

另外 - 与当前接受的答案相反 - textareas do 通常默认换行。 pre-wrap 似乎是我的浏览器上的默认设置。

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

white-space: nowrap also works if you don't care about whitespace, but of course you don't want that if you're working with code (or indented paragraphs or any content where there might deliberately be multiple spaces) ... so i prefer pre.

overflow-wrap: normal (was word-wrap in older browsers) is needed in case some parent has changed that setting; it can cause wrapping even if pre is set.

also -- contrary to the currently accepted answer -- textareas do often wrap by default. pre-wrap seems to be the default on my browser.

回复收藏 0 原文

祁梦 2024-07-23 05:23:48

默认情况下，文本区域不应换行，但您可以设置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 现在是一个 wiki，英文源链接已失效。

EDIT2：如果您想确保每个浏览器都支持它，您可以使用 CSS 来更改换行行为：

使用层叠样式表（CSS），您可以达到相同的效果
空白：nowrap；溢出：自动；。
因此，wrap属性可以说已经过时了。

来自这里（似乎是一个很好的页面，其中包含有关textarea的信息）。

EDIT3：我不确定它是什么时候改变的（根据评论，一定是在2014年左右），但是 wrap 现在是一个官方的 HTML5 属性，请参见 w3schools。更改了答案以匹配此内容。

Textareas shouldn't wrap by default, but you can set wrap="soft" to explicitly disable wrap:

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

EDIT: The "wrap" attribute is not officially supported. I got it from the german SELFHTML page (an english source is here) that says IE 4.0 and Netscape 2.0 support it. I also tested it in FF 3.0.7 where it works as supposed. Things have changed here, SELFHTML is now a wiki and the english source link is dead.

EDIT2: If you want to be sure every browser supports it, you can use CSS to change wrap behaviour:

Using Cascading Style Sheets (CSS), you can achieve the same effect with
white-space: nowrap; overflow: auto;.
Thus, the wrap attribute can be regarded as outdated.

From here (seems to be an excellent page with information about textarea).

EDIT3: I'm not sure when it changed (according to the comments, must've been around 2014), but wrap is now an official HTML5 attribute, see w3schools. Changed the answer to match this.

回复收藏 0 原文

路还长，别太狂 2024-07-23 05:23:48

以下基于 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>

The following CSS based solution works for me:

<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>

回复收藏 0 原文

Saygoodbye 2024-07-23 05:23:48

我找到了一种方法来使所有这些同时工作的文本区域：

使用水平滚动条
支持多行文本
文本不换行

它适用于：

Chrome 15.0.874.120
Firefox 7.0.1
Opera 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>

在部分的末尾有这样的 JavaScript：

 window.onload=function(){
   document.getElementById("myTextarea").wrap='off';
 }

JavaScript 是为了使 W3C 验证器通过 XHTML 1.1 Strict，因为 wrap 属性是不是官方的，因此不能直接作为 (x)HTML 标记，但大多数浏览器都会处理它，因此在加载页面后它会设置该属性。

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

I found a way to make a textarea with all this working at the same time:

With horizontal scrollbar
Supporting multiline text
Text not wrapping

It works well on:

Chrome 15.0.874.120
Firefox 7.0.1
Opera 11.52 (1100)
Safari 5.1 (7534.50)
IE 8.0.6001.18702

Let me explain how i get to that: I was using Chrome inspector integrated tool and I saw values on CSS styles, so I try these values, instead of normal ones... trial & errors till I got it reduced to minimum and here it is for anyone that wants it.

In the CSS section I used just this for Chrome, Firefox, Opera and Safari:

textarea {
  white-space:nowrap;
  overflow:scroll;
}

In the CSS section I used just this for IE:

textarea {
  overflow:scroll;
}

It was a bit tricky, but there is the CSS.

An (x)HTML tag like this:

<textarea id="myTextarea" rows="10" cols="15"></textarea>

And at the end of the <head> section a JavaScript like this:

 window.onload=function(){
   document.getElementById("myTextarea").wrap='off';
 }

The JavaScript is for making the W3C validator passing XHTML 1.1 Strict, since the wrap attribute is not official and thus cannot be an (x)HTML tag directly, but most browsers handle it, so after loading the page it sets that attribute.

Hope this can be tested on more browsers and versions and help someone to improve it and makes it fully cross-browser for all versions.

回复收藏 0 原文

独享拥抱 2024-07-23 05:23:48

这个问题似乎是禁用 textarea 换行最常见的问题。但是，截至 2017 年 4 月，我发现 IE 11 (11.0.9600) 将不会使用上述任何解决方案禁用自动换行。

唯一适用于 IE 11 的解决方案是 wrap="off"。 wrap="soft" 和/或各种 CSS 属性，如 white-space: pre 改变 IE 11 选择换行的位置，但它仍然在某个地方换行。请注意，我已经在使用或不使用兼容性视图的情况下对此进行了测试。 IE 11 与 HTML 5 非常兼容，但在本例中并非如此。

因此，为了实现保留空白并离开右侧的行，我正在使用：

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

幸运的是，这似乎在 Chrome 和 Chrome 中都有效。火狐也是如此。我并不是为使用 HTML 5 之前的 wrap="off" 辩护，只是说 IE 11 似乎需要它。

This question seems to be the most popular one for disabling textarea wrap. However, as of April 2017 I find that IE 11 (11.0.9600) will not disable word wrap with any of the above solutions.

The only solution which does work for IE 11 is wrap="off". wrap="soft" and/or the various CSS attributes like white-space: pre alter where IE 11 chooses to wrap but it still wraps somewhere. Note that I have tested this with or without Compatibility View. IE 11 is pretty HTML 5 compatible, but not in this case.

Thus, to achieve lines which retain their whitespace and go off the right-hand side I am using:

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

Fortuitously this does seem to work in Chrome & Firefox too. I am not defending the use of pre-HTML 5 wrap="off", just saying that it seems to be required for IE 11.

回复收藏 0 原文

澜川若宁 2024-07-23 05:23:48

如果您可以使用 JavaScript，以下可能是当今最便携的选项（已测试 Firefox 31、Chrome 36）：

带有 contenteditable="true" 的 div，
部分 JavaScript 表单建议的样式
点击按钮时提交 : 如何使用 javascript 提交表单？

http://jsfiddle.net/cirosantilli/eaxgesoq/

<style>
  div#editor {
    white-space: pre;
    word-wrap: normal;
    overflow-x: scroll;
  }
<style>
<div contenteditable="true"></div>

似乎没有标准的、可移植的 CSS 解决方案：

wrap 属性不标准
white-space: pre; 不适用于 Firefox 31对于文本区域。小提琴，开放功能请求。

另外，如果你会使用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。

If you can use JavaScript, the following might be the most portable option today (tested Firefox 31, Chrome 36):

a div with contenteditable="true"
the styles suggested by Partly
JavaScript form submission on button click: How to submit a form using javascript?

http://jsfiddle.net/cirosantilli/eaxgesoq/

<style>
  div#editor {
    white-space: pre;
    word-wrap: normal;
    overflow-x: scroll;
  }
<style>
<div contenteditable="true"></div>

There seems to be no standard, portable CSS solution:

wrap attribute is not standard
white-space: pre; does not work for Firefox 31 for textarea. Fiddle, open feature request.

Also, if you can use Javascript, you might as well use the ACE editor:

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>

Probably works with ACE because it does not use a textarea either which is underspecified / incoherently implemented, but not sure if it is uses contenteditable.

回复收藏 0 原文

~没有更多了~