HTML Textarea горизонтальная прокрутка

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


html word-wrap textarea
person Shyam    schedule 08.01.2009    source источник

Ответы (5)


arrow_upward
50
arrow_downward

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

white-space: nowrap;

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

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

person Aram Kocharyan    schedule 24.02.2011
comment
Это не работает. Он помещает весь текст, включая несколько строк, в одну строку, а не желаемое поведение. - person Mr. TA; 17.07.2015
comment
Чтобы правильно видеть новые строки, вы должны использовать white-space: pre;. - person Jesse; 04.09.2016

arrow_upward
101
arrow_downward

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

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

person Shyam    schedule 09.01.2009
comment
Правильный способ сделать это - через CSS, как указывает ответ Арама Кочаряна. off не является допустимым или распознанным значением <textarea> атрибута wrap. - person Jesse; 04.09.2016

arrow_upward
21
arrow_downward

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

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

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

person Azdle    schedule 18.03.2015

arrow_upward
6
arrow_downward

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

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

также должен быть -moz-scrollbars-horizontal

person Filip Ekberg    schedule 08.01.2009

arrow_upward
0
arrow_downward

Используйте white-space: pre; как свойство CSS.

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

person Chiel ten Brinke    schedule 06.06.2021