Горизонтальний прокрутка HTML Textarea

77

Я хотів би надати горизонтальну прокрутку до текстового поля на моїй HTML-сторінці. Прокрутка повинна з'являтися без загортання, якщо я набираю довгий рядок без розриву рядка. Кілька друзів запропонували використовувати атрибут CSS overflow-y, який у мене не працював. Браузерами, якими я користуюся, є IE 6+ та Mozilla 3+.

html textarea word-wrap

— Шайам
джерело

2

<textarea wrap="off"></textarea>

— Адарш Мадреча

48

Щоб не встановлювати обтікання, слід використовувати:

white-space: nowrap;

Для інших значень: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

ПРИМІТКА. Однак знецінений, wrap="off"здається, єдиний спосіб підтримки застарілих браузерів. Незважаючи на те, що він не сумісний з HTML 5, все одно я віддаю перевагу, якщо ви націлюєтеся на всі браузери.

— Арам Кочарян
джерело

11

Це не працює. Він розміщує весь текст, включаючи кілька рядків, в одному рядку, а не бажану поведінку.

— містер ТА

23

Щоб правильно бачити нові рядки, потрібно використовувати white-space: pre;.

— Джессі

98

Я вирішив це зробити несумісним із W3c способом, і це працює як в IE, так і у Firefox, а також у Chrome теж.

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

— Шайам
джерело

Правильний спосіб зробити це за допомогою CSS , на що вказує відповідь Арама Кочаряна . offне є дійсним або визнаним значенням <textarea>атрибута wrap.

— Джессі

17

Якщо у вас є попередньо відформатований текст, який включає НЧ, вам слід додати white-space: pre;до css. Це збереже нові рядки, які вже є в тексті, і не оберне довгі рядки.

Це працює у всіх версіях Firefox, усіх браузерах на базі Webkit та IE6 +.

Джерело: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

— Аздл
джерело

6

Спробуйте це:

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

там також повинні бути -moz-смуги прокрутки-горизонтальні

— Філіп Екберг
джерело