web-dev-qa-db-ja.com

HTML Textarea水平スクロール

HTMLページのテキストエリアに水平スクロールを提供したいと思います。改行なしで長い行を入力すると、スクロールは折り返さずに表示されます。数人の友人が、overflow-y CSS属性を使用することを提案しましたが、それは私には機能しませんでした。私が使用しているブラウザはIE 6+およびMozilla 3+です。

70
Shyam

ラッピングを設定しない場合は、次を使用します。

white-space: nowrap;

その他の値の場合: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

注:ただし、減価償却wrap="off"がレガシーブラウザサポートの唯一の方法のようです。 HTML 5に準拠していませんが、すべてのブラウザをターゲットにしている場合、それは私の好みです。

41
Aram Kocharyan

私はW3cに準拠していない方法でそれを行うことを考え出しました。それはIEとFirefox、そして偶然Chromeも。

属性wrapに値offを追加しました。つまり、<textarea cols=80 rows=12 wrap='off'>が私がしたことです。

93
Shyam

LFを含む書式設定済みのテキストがある場合は、white-space: pre;からcssへ。これにより、すでにテキストに含まれている新しい行が保持され、長い行は折り返されません。

これは、Firefoxのすべてのバージョン、すべてのWebkitベースのブラウザー、およびIE6 +で機能します。

ソース: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

11
Azdle

これらを試してください:

overflow: scroll; 
overflow-y: scroll; 
overflow-x: scroll; 
overflow:-moz-scrollbars-vertical;

-moz-scrollbars-horizo​​ntalもあるはずです

4
Filip Ekberg