Как удалить перенос слов из текстовой области?

146

моя простая текстовая область не показывает горизонтальную полосу при переполнении текста. Оборачивает текст для новой строки. Так как же убрать перенос слов и отобразить горизонтальную полосу при переполнении текста?

html textarea word-wrap Каменное сердце
источник
Вы имеете в виду HTML? Свинг? что-то другое?
Ксуралта
Добавлен HTML-тег, чтобы избежать этой путаницы, но я только догадываюсь по текущим ответам.
Серхио Акоста,

Ответы:

142

Textareas не должен переноситься по умолчанию, но вы можете установить wrap = "soft", чтобы явно отключить перенос:

<textarea name="nowrap" cols="30" rows="3" wrap="soft"></textarea>

РЕДАКТИРОВАТЬ: Атрибут "Wrap" официально не поддерживается. Я получил его с немецкой страницы SELFHTML ( англоязычный источник здесь ), где написано, что IE 4.0 и Netscape 2.0 поддерживают ее. Я также проверил это в FF 3.0.7, где он работает как положено. Здесь все изменилось, теперь SELFHTML - это вики, а ссылка на английский источник устарела.

РЕДАКТИРОВАТЬ 2: Если вы хотите быть уверены, что каждый браузер поддерживает его, вы можете использовать CSS для изменения поведения переноса:

Используя каскадные таблицы стилей (CSS), вы можете добиться того же эффекта с white-space: nowrap; overflow: auto;. Таким образом, атрибут обтекания можно считать устаревшим.

От здесь (кажется, отличная страница с информацией о текстовом).

РЕДАКТИРОВАТЬ 3: Я не уверен, когда это изменилось (согласно комментариям, должно быть, было около 2014 года), но wrapтеперь это официальный атрибут HTML5, см. W3schools . Изменен ответ, чтобы соответствовать этому.

schnaader
источник
9
Атрибут "wrap" работает в Firefox 3.6, но не является верным HTML5. Однако решение CSS не работает, как будто «white-space: nowrap» игнорируется.
Клинт Пахл
9
white-space: pre;(или pre-line/ pre-wrap) оказал такое же влияние, как и wrap="off"на меня (тогда как white-space: nowrapне уважал padding)
philfreo
5
@ClintPachl На самом деле, wrapэто действительный HTML5 ... его настройки сейчас "hard"и "soft"( ссылка )
Mottie
4
@Mottie Было бы намного лучше ссылаться на текущую версию спецификации HTML5, чем на документы Mozilla. Вот ссылка на текущую версию - w3.org/TR/2014/CR-html5-20140731/forms.html#attr-textarea-wrap
Петр Доброгост,
2
wrap="off"больше не действителен, однако это требование как для IE, так и для Edge!
Jools
161 
textarea {
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: scroll;
}

white-space: nowrapтакже работает, если вы не заботитесь о пробелах, но, конечно, вы не хотите этого, если вы работаете с кодом (или абзацами с отступами или любым содержимым, где может быть намеренно несколько пробелов) ... поэтому я предпочитаю pre.

overflow-wrap: normal(было word-wrapв старых браузерах) необходимо в случае, если какой-либо родитель изменил эту настройку; это может вызвать обертывание, даже еслиpre он установлен.

также - в отличие от принятого в настоящее время ответа - прокручиваемые делать часто завернуть по умолчанию. pre-wrapкажется по умолчанию в моем браузере.

Переменная облачность
источник
18
С FF 20 вам все еще нужно wrap = "off" в теге html textarea! Эта технология такая противоречивая хрень.
Лоуренс Дол
3
+1 за предоставление решения CSS и указание на то, что
текстовые поля
1
Ах, похоже, что в 2001 году в Firefox поступил запрос на добавление функций, но с некоторыми недавними (2014) комментариями в поддержку поведения Chrome разработчик Эхсан Ахгари: bugzilla.mozilla.org/show_bug.cgi?id=82711 . Иди и проголосуй!
Ciro Santilli 郝海东 郝海东 病 六四 事件 法轮功
1
Теперь это работает в Firefox (канал Аврора, v36) - см. Jsfiddle.net/mlhDevelopment/gvjy14xu зеленую текстовую область.
mlhDev
2
Лично я считаю , что лучше заменить overflow-x: scrollс overflow: auto. Полосы прокрутки уменьшают доступное пространство для ввода текста в текстовой области. Кроме того, IE11 визуализировал вертикальную полосу прокрутки без необходимости с вашим путем, но overflow: autoисправил это.
Сэм
19

Следующее решение на основе 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>
Galghamon
источник
15

Я нашел способ создать текстовую область, в которой все это работает одновременно:

  • С горизонтальной полосой прокрутки
  • Поддержка многострочного текста
  • Текст не переносится

Хорошо работает на:

  • Chrome 15.0.874.120
  • Firefox 7.0.1
  • Опера 11,52 (1100)
  • Safari 5.1 (7534.50)
  • IE 8.0.6001.18702

Позвольте мне объяснить, как мне это сделать: я использовал интегрированный инструмент Chrome inspector и увидел значения в стилях 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 напрямую, но большинство браузеров обрабатывают его, поэтому после загрузки страницы он устанавливает этот атрибут.

Надеюсь, что это может быть проверено на большем количестве браузеров и версий и поможет кому-то улучшить его и сделать его полностью кросс-браузерным для всех версий.

z666zz666z
источник
4
+1 .wrap = 'off' - магия, которая добилась цели в FF 14.0.1 ... Спасибо.
Shanimal
Кажется, что JavaScript не работает в Safari 5.0.6 (последняя версия PPC), даже если вы можете использовать wrap = "off" в HTML.
.wrap это то, что сделал для меня, используя Chrome. Я также использовал его в сочетании с запретом переноса в CSS.
MineAndCraft12
wrap = 'off' заставляет IE вести себя как другие браузеры.
Рэнд
4

Этот вопрос кажется наиболее популярным для отключения textareaпереноса. Однако по состоянию на апрель 2017 года я обнаружил, что IE 11 (11.0.9600) не будет отключать перенос слов ни с одним из указанных выше решений.

Только решение , которое делает работу для IE 11 является wrap="off". wrap="soft"и / или различные атрибуты CSS, такие как white-space: prealter, где IE 11 выбирает перенос, но он все равно где-то переносится. Обратите внимание, что я проверил это с или без представления совместимости . IE 11 довольно совместим с HTML 5, но не в этом случае.

Таким образом, для достижения линий, которые сохраняют свои пробелы и уходят с правой стороны, я использую:

<textarea style="white-space: pre; overflow: scroll;" wrap="off">

К счастью, похоже, что это работает и в Chrome & Firefox. Я не защищаю использование pre-HTML 5 wrap="off", просто утверждаю, что он необходим для IE 11.

JonBrave
источник
Хороший, спас мой день! Я ломал голову над тем, почему программно добавить новые строки не удалось, используя код из принятого ответа.
Tum
1
Эта ошибка IE также была передана в Edge
Jools
3

Если вы можете использовать JavaScript, следующий вариант может быть наиболее переносимым на сегодняшний день (протестировано Firefox 31, Chrome 36):

http://jsfiddle.net/cirosantilli/eaxgesoq/

<style>
  div#editor {
    white-space: pre;
    word-wrap: normal;
    overflow-x: scroll;
  }
<style>
<div contenteditable="true"></div>

Кажется, нет стандартного, портативного решения CSS:

Кроме того, если вы можете использовать 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>

Вероятно, работает с ACE, потому что он не использует textareaни тот, который не указан / непоследовательно реализован, но не уверен, что он используется contenteditable.

Сиро Сантилли 郝海东 冠状 病 六四 事件 法轮功
источник