web-dev-qa-db-ja.com

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

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

htmltextareaword-wrap
134
StoneHeart

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;で同じ効果を得ることができます。したがって、ラップ属性は古くなっていると見なすことができます。

From here （textareaに関する情報を備えた素晴らしいページのようです）。

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

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

white-space: nowrapは、空白を気にしない場合にも機能しますが、コード（またはインデントされた段落または意図的に複数のスペースが存在する可能性のあるコンテンツ）を使用している場合は、もちろんその必要はありません...だから私はpreを好む。

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

また-現在受け入れられている答えとは反対に-textareas doはデフォルトでしばしばラップします。 pre-wrapは私のブラウザのデフォルトのようです。

145
Partly Cloudy

次の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>
18
Galghamon

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

  • 水平スクロールバー付き
  • 複数行テキストのサポート
  • 折り返さないテキスト

うまく機能します：

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

そして、<head>セクションの最後に、次のようなJavaScriptがあります。

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

JavaScriptはW3CバリデーターにXHTML 1.1 Strictを渡すためのものです。wrap属性は公式ではなく、したがって（x）HTMLタグにすることはできませんが、ほとんどのブラウザーはそれを処理するため、ページを読み込んだ後にその属性を設定します。

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

13
z666zz666z

この質問は、textareaラップを無効にするための最も一般的な質問のようです。ただし、2017年4月の時点でIE 11（11.0.9600）はnot上記のソリューションのいずれかでワードラップを無効にします。

IE 11で機能するonlyソリューションはwrap="off"です。 wrap="soft"および/またはwhite-space: preなどのさまざまなCSS属性は、IE 11がラップすることを選択しますが、それでもどこかにラップします。 Compatibility Viewの有無にかかわらず、これをテストしたことに注意してください。 IE 11はかなりHTML 5と互換性がありますが、この場合はそうではありません。

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

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

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

3
JonBrave

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で動作しますが、contenteditableを使用しているかどうかは不明です。

3
Ciro Santilli 新疆改造中心996ICU六四事件