テキストエリアからワードラップを削除するにはどうすればよいですか?


146

私の単純なtextareaは、テキストがオーバーフローしたときに水平バーを表示しません。新しい行のテキストを折り返します。では、テキストがオーバーフローしたときにワードラップを削除して水平バーを表示するにはどうすればよいですか?


HTMLを意味しますか?スイング?他に何か?
ksuralta 2009年

その混乱を避けるためにHTMLタグを追加しましたが、私は現在の答えで推測しているだけです。
セルジオアコスタ

回答:


142

Textareaはデフォルトでは折り返すべきではありませんが、wrap = "soft"を設定して明示的に折り返しを無効にすることができます。

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

編集:「wrap」属性は公式にはサポートされていません。私は、IE 4.0とNetscape 2.0がサポートしているというドイツのSELFHTMLページ(英語のソースはこちら)からそれを入手しまし。FF 3.0.7でもテストしましたが、想定どおりに動作します。ここで状況が変わり、SELFHTMLはwikiになり、英語のソースリンクは無効になりました。

EDIT2:すべてのブラウザーが確実にサポートするようにしたい場合は、CSSを使用してラップ動作を変更できます。

カスケードスタイルシート(CSS)を使用すると、で同じ効果を得ることができます white-space: nowrap; overflow: auto;。したがって、wrap属性は古くなっていると見なすことができます。

ここから(textareaに関する情報が掲載された優れたページのようです)。

EDIT3:いつ変更されたのかはわかりませんが(コメントによると、2014年頃だったはずです)、wrap現在は公式のHTML5属性になっています。w3schoolsを参照してください。これに一致するように答えを変更しました。


9
「wrap」属性はFirefox 3.6で機能しますが、有効なHTML5ではありません。ただし、「white-space:nowrap」が無視されるかのように、CSSソリューションは機能しません。
Clint Pachl

9
white-space: pre;(またはpre-line/ pre-wrap)はwrap="off"私と同じ影響を及ぼしました(一方、をwhite-space: nowrap尊重しませんでしたpadding
philfreo

5
@ClintPachl実際にwrapは、HTML5は有効です...その設定は今で"hard"あり"soft"ref
Mottie

4
@Mottie現在のバージョンのHTML5仕様にリンクする方が、Mozillaドキュメントにリンクするよりもはるかに優れています。こちらが現在のバージョンのリンクです– w3.org/TR/2014/CR-html5-20140731/forms.html#attr-textarea-wrap
Piotr Dobrogost '10

2
wrap="off"はもはや有効ではありませんが、IEとEdgeの両方の要件です。
Jools、

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

white-space: nowrap空白を気にしない場合にも機能しますが、コード(またはインデントされた段落や、意図的に複数のスペースがある可能性のあるコンテンツ)を操作している場合は、もちろんそうしたくありませんpre

overflow-wrap: normalword-wrap古いブラウザにありました)親がその設定を変更した場合に必要です。preが設定されていても、折り返しが発生する可能性があります。

また、現在受け入れられている回答とは逆に、textarea デフォルトで折り返されることがよくあります。pre-wrap私のブラウザのデフォルトのようです。


18
FF 20では、html textareaタグにwrap = "off"が必要です!この技術は、このような一貫性のないがらくたです。
Lawrence Dol 2013

3
CSSソリューションを提供し、
textareas

1
ああ、2001年からFirefoxで機能のリクエストがあるようですが、開発者Ehsan AkhgariによるChromeの動作に関する最近(2014年)のサポートコメント:bugzilla.mozilla.org/show_bug.cgi ?id=82711があります。移動して賛成投票してください!
Ciro Santilli郝海东冠状病六四事件法轮功

1
これはFirefox(Auroraチャネル、v36)で動作するようになりました-jsfiddle.net/mlhDevelopment/gvjy14xu緑のテキストエリアをご覧ください。
mlhDev 2014

2
個人的に、私はそれを置き換えるために、より良いことだと思うoverflow-x: scrolloverflow: auto。スクロールバーは、テキスト領域で使用可能な入力スペースを減らします。また、IE11は不必要に垂直スクロールバーをレンダリングしましたが、overflow: auto修正されました。
サム・

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>

15

これらすべてが同時に機能するテキストエリアを作成する方法を見つけました:

  • 水平スクロールバー付き
  • マルチラインテキストのサポート
  • テキストが折り返されない

それは上でうまく働きます:

  • クローム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 Strictを渡すようにするためのものです。wrap属性は公式ではないため、(x)HTMLタグにすることはできませんが、ほとんどのブラウザーはそれを処理するため、ページをロードした後、その属性を設定します。

これがより多くのブラウザとバージョンでテストされ、誰かがそれを改善し、すべてのバージョンで完全にクロスブラウザになることを願っています。


4
+1 .wrap = 'off'は、FF 14.0.1でトリックを実行した魔法です...ありがとう。
Shanimal

HTMLでwrap = "off"を使用できても、JavaScriptはSafari 5.0.6(最後のPPCバージョン)では機能しないようです。

.wrapは、Chromeを使用して私のために何をしたかです。また、CSSのno-wrapと組み合わせて使用​​しました。
MineAndCraft12

wrap = 'off'はIEを他のブラウザーと同様に動作させます。
Rand Scullard、2017

4

この質問は、textareaラップを無効にするための最も人気のある質問のようです。ただし、2017年4月の時点で、IE 11(11.0.9600)は上記のいずれのソリューションでもワードラップを無効にしないことがわかりました。

唯一の IE 11のための作業を行うソリューションですwrap="off"wrap="soft"および/またはwhite-space: preIE 11がラップすることを選択したalter などのさまざまなCSS属性がまだどこかにラップします。互換表示ありまたはなしでこれをテストしたことに注意してください。IE 11はかなりHTML 5互換ですが、この場合はそうではありません。

したがって、空白を保持し、右側から外れる行を実現するには、次のようにします。

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

偶然にも、これはChromeとFirefoxでも機能するようです。私はwrap="off"、HTML 11以前の使用を擁護しているわけではなく、IE 11に必要であると思われるだけです。


素敵な一日、私の日を救った!受け入れられた回答のコードを使用してプログラムで改行を追加できない理由について頭を悩ませていました。
Tum

1
このIEのバグはEdgeにも転送されました
Jools

3

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>

過小評価されているtextareaか、一貫性のない方法で実装されているACEを使用していないため、おそらくACEで動作しますが、使用されているかどうかは不明ですcontenteditable

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.