HTML Textarea горизонтальная прокрутка - PullRequest
69 голосов
/ 08 января 2009

Я хотел бы предоставить горизонтальную прокрутку к текстовой области на моей HTML-странице. Прокрутка должна отображаться без переноса, если я набираю длинную строку без разрыва строки. Несколько друзей предложили использовать CSS-атрибут overflow-y, который у меня не работал. Я использую браузеры IE 6+ и Mozilla 3+.

Ответы [ 4 ]

93 голосов
/ 09 января 2009

Я решил сделать это не-W3c-совместимым способом, и он работает и в IE, и в Firefox, и, кстати, тоже в Chrome.

Я добавил атрибут wrap со значением off, то есть <textarea cols=80 rows=12 wrap='off'> - это то, что я сделал.

38 голосов
/ 24 февраля 2011

Чтобы не задавать перенос, вы должны использовать:

white-space: nowrap;

Для других значений: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

ПРИМЕЧАНИЕ. Однако устаревший wrap="off" кажется единственным способом поддержки устаревших браузеров. Хотя он не совместим с HTML 5, я все же предпочитаю, чтобы вы работали со всеми браузерами.

11 голосов
/ 18 марта 2015

Если у вас есть предварительно отформатированный текст, который включает LF, вы должны добавить white-space: pre; к CSS. Это сохранит новые строки, которые уже есть в тексте, и не будет переносить длинные строки.

Это работает во всех версиях Firefox, во всех браузерах на основе Webkit и в IE6 +.

Источник: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

4 голосов
/ 08 января 2009

Попробуйте это:

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

также должен быть горизонтальный -moz-scrollbars

...