回答:
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を参照してください。これに一致するように答えを変更しました。
white-space: pre;
(またはpre-line
/ pre-wrap
)はwrap="off"
私と同じ影響を及ぼしました(一方、をwhite-space: nowrap
尊重しませんでしたpadding
)
wrap="off"
はもはや有効ではありませんが、IEとEdgeの両方の要件です。
textarea {
white-space: pre;
overflow-wrap: normal;
overflow-x: scroll;
}
white-space: nowrap
空白を気にしない場合にも機能しますが、コード(またはインデントされた段落や、意図的に複数のスペースがある可能性のあるコンテンツ)を操作している場合は、もちろんそうしたくありませんpre
。
overflow-wrap: normal
(word-wrap
古いブラウザにありました)親がその設定を変更した場合に必要です。pre
が設定されていても、折り返しが発生する可能性があります。
また、現在受け入れられている回答とは逆に、textarea はデフォルトで折り返されることがよくあります。pre-wrap
私のブラウザのデフォルトのようです。
overflow-x: scroll
しoverflow: auto
。スクロールバーは、テキスト領域で使用可能な入力スペースを減らします。また、IE11は不必要に垂直スクロールバーをレンダリングしましたが、overflow: auto
修正されました。
次の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インスペクター統合ツールを使用していて、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"
および/またはwhite-space: pre
IE 11がラップすることを選択したalter などのさまざまなCSS属性がまだどこかにラップします。互換表示ありまたはなしでこれをテストしたことに注意してください。IE 11はかなりHTML 5互換ですが、この場合はそうではありません。
したがって、空白を保持し、右側から外れる行を実現するには、次のようにします。
<textarea style="white-space: pre; overflow: scroll;" wrap="off">
偶然にも、これはChromeとFirefoxでも機能するようです。私はwrap="off"
、HTML 11以前の使用を擁護しているわけではなく、IE 11に必要であると思われるだけです。
JavaScriptを使用できる場合、今日最も移植性の高いオプションは次のとおりです(Firefox 31、Chrome 36でテスト済み)。
contenteditable="true"
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では機能しませんtextarea
。フィドル、オープン機能のリクエスト。
また、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
。